用jquery实现简单的表单验证效果

看了《锋利的jquery》一书，练习了下期中的一个用jquery写表单验证的例子。

效果如图：






总结：

这是个比较简单的表单验证，主要验证了表单中的用户名和邮箱两个必填选项。表单验证其实质是个不断往下过滤的过程。

主要思路：

（1）判断当前失去焦点的元素是“用户名”还是“邮箱”，然后分别处理。

（2）如果是“用户名”，判断元素的值的长度是否为空或小于6，如果是，则用红色提醒用户输入不正确，反之，则用绿色提醒用户输入正确

（3）如果是“邮箱”，判断元素的值是否为空且是否符合邮箱的格式，如果不符合，则用红色提醒用户输入不正确，反之，则用绿色提醒用户输入正确。

（4）将提醒信息追加到当前元素的父元素的最后

再来具体分析下代码实现:

1。表单中必填字段后都有个红色的*号。这里用到jquery的each()方法对表单中的元素进行遍历。代码如下

// 如果是必填的，则增加红星标识
$("form :input.required").each(function() {
// 创建元素
var $required=$("<strong class='high'>*</strong>");
// 然后将它追加到文档中
$(this).parent().append($required);
});

2.当用户在“用户名”和“邮箱”文本框中填写完信息后，将光标的焦点从中移出时，需要即时判断“用户名”或“邮箱”是否输入正确，因此需要给表单元素添加失去焦点事件，即blur。代码如下：

$('form :input').blur(function(event) {
}）

3.需要注意的是，由于每次在元素失去焦点后，都会创建一个新的提醒元素，然后将它追加到文档中，最后就出现了多次的提醒信息。因此，在创建新的提醒元素之前，将当前提醒元素之前的提醒元素都删除，可以使用remove()的方法来实现，代码如下：

$('form :input').blur(function(event) {
   var $parent=$(this).parent();
   $parent.find(".formtips").remove();
}）

4.如果用户无视错误提醒，执意要提交，为了使表单填写准确，在表单提交之前，需要对表单的必填元素进行一次整体性的验证，可以直接用trigger()方法来触发blur事件，从而达到验证效果。如果填写错误，就以红色提醒用户；如果用户名和邮箱都不符合规则，那就有2处错误，既有两个class为"onError"的元素，因此可根据class为“onError”元素额长度来判断是否可以提交、如果长度为0，即true，说明已经可以提交;如果长度大于0，即false，说明有错误，需要阻止表单提交。阻止表单提交可以直接用"return
false"语句。代码如下：

//提交，最终验证
$('#send').click(function(event) {
$("form :input.required").trigger('blur');
var numError=$('form .onError').length;
if(numError){
return false;
}
alert("注册成功，密码已发到你的邮箱，请查收.")
})；

5.额外增加的功能，即不需等元素失去焦点时，输入时就可以提醒用户。为此给表单绑定了keyup和focus事件，keyup事件能在每次用户松开按键时触发，实现即时提醒；focus事件能在元素得到焦点的时候触发，也可以实现即时提醒代码如下：

$('form :input').blur(function(event) {
  //代码省略
}）.keyup(funciton(){
      $(this).triggerHandler('blur');
}).focus(funciton(){
$(this).triggerHandler('blur');
})

这样当用户将光标定位到文本框上和改变文本框的值时，表单就会即时提醒用户填写是否正确。

这里要注意的是，trigger('blur')不仅会触发位元素绑定的blur事件，也会触发浏览器默认的blur事件，即不能讲光标定位到文本框上。而triggerHandler('blur')只会触发为元素绑定的blur事件，而不触发浏览器默认的blur事件。

留待解决的问题：

1.这里邮箱验证用了正则表达式

this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value)

是否还有更严谨细致的写法有待研究

2.客户端的验证仅用于提升用户操作体验，而服务器端仍需对用户输入的数据的合法性进行校验，对于禁用了脚本的用户和用户***的网页提交操作，必须在服务器端验证。