FORM表单之焦点事件验证

开发环境

1、django+python
2、需用到jquery validate.js组件

代码实现

$( '#userForm' ).validate({  
    rules:{  
        truename:{  
            required:true,  
            minlength:2,  
            maxlength:6,  
        },  
        email:{  
            required:true,  
            email:true,  
        },  
        province:{  
            required:true,  
        },  
        city:{  
            required:true,  
        },  
        area:{  
            required:true,  
        },  
    },  
    messages:{  
        truename:{  
            required:'请输入您的姓名',  
            minlength:'姓名项只允许2~6个字符',  
            maxlength:'姓名项只允许2~6个字符',  
            isChar:'请正确格式的姓名(暂支持汉字)',  
        },  
        email:{  
            required:'请输入邮箱地址',  
            email:'请检查您输入的邮箱',  
        },  
        province:{  
            required:'请选择您所在的省'  
        },  
        city:{  
            required:'请选择您所在的市'  
        },  
        area:{  
            required:'请选择您所在的区'  
        },  
    },  
});  

自定义调用函数：

// JavaScript Document  

//检测手机号是否正确  
jQuery.validator.addMethod("<strong>isMobile</strong>", function(value, element) {  
    var length = value.length;  
    var regPhone = /^1([3578]\d|4[57])\d{8}$/;  
    return this.optional(element) || ( length == 11 &amp;&amp; regPhone.test( value ) );    
}, "请正确填写您的手机号码");   

//检测用户姓名是否为汉字  
jQuery.validator.addMethod("<span style="color:#FF0000;"><strong>isChar</strong></span>", function(value, element) {  
    var length = value.length;  
    var regName = /[^\u4e00-\u9fa5]/g;  
    return this.optional(element) || !regName.test( value );    
}, "请正确格式的姓名(暂支持汉字)");  

//检测邮政编码  
jQuery.validator.addMethod("<strong>isZipCode</strong>", function(value, element) {    
    var tel = /^[0-9]{6}$/;  
    return this.optional(element) || (tel.test(value));  
}, "请正确填写您的邮政编码");  

总结：

焦点事件验证比较方便快捷，可直接通过修改NAME和REQUIRE来修改需求。