介绍

介绍

今天福哥来实现jQuery控件form对于表单验证的功能，说起表单验证大家可以想到的就是通过JQ获取表单项的值，然后判断表单项的值是否满足业务规则，如果不满足规则就要告知用户重新填写或重新选择表单项，其实这一系列的操作是有很多规则可循的。

首先通过JQ获取表单项的值是第一步，也是可以集中处理的。

其次根据业务规则判断表单项的值是否合法，这一步也是可以总结到一起处理的。

最后根据判断结果向用户给出告警提示，这一步更加可以统一处理的。

那么今天福哥就根据分析出来的这个三步操作来实现相应的业务逻辑，之前已经完成了一部分JQ控件form的功能了，所以福哥只给出增加的部分的代码。

JQ控件form

Javascript

_doValidation : function(form, validations){
    if(validations instanceof Array){
        for(vi=0;vi<validations.length;vi++){
            if(this._testValidation(form, validations[vi].type, validations[vi].value, validations[vi].name, validations[vi].msg)){
                this._postValidationError(form, validations[vi].name, validations[vi].msg);

                return false;
            }
        }
    }

    return true;
},

_postValidationError : function(form, name, msg){
    if(opts.onValidationError){
        opts.onValidationError(form, name, msg);
    }
    else{
        alert(msg);
        $(form).find('[name="'+name+'"]').focus();
    }
},

_testValidation : function(form, type, value, name, msg){
    elemObj = $(form).find('[name="'+name+'"]');
    elemVal = elemObj.val();
    switch (type) {
        case 'empty':
            if(elemVal == ""){

                return true;
            }
            break;
        case 'min':
            if(elemVal.length < value){

                return true;
            }
            break;
        case 'max':
            if(elemVal.length > value){

                return true;
            }
            break;
        case 'len':
            if(elemVal.length != value){

                return true;
            }
            break;
        case 're':
            if(!(new RegExp(value)).test(elemVal)){

                return true;
            }
            break;
    }

    return false;
},

用户登录页面

Javascript

$(function () {
    $('form').form({
        url: "user/login",
        method: "post",
        validations: [
            {type:"empty", name:"user", msg:"请填写用户名"},
            {type:"min", value:2, name:"user", msg:"用户名最少2个字"},
            {type:"max", value:20, name:"user", msg:"用户名最多20个字"},
            {type:"re", value:/^[^\`\~\!\@\#\$\%\^\&\*\(\)\[\]\{\}\-\_\+\|\\\:\;\"\'\<\>\,\.\?\/]/, name:"user", msg:"用户名不能以符号开头"},
            {type:"empty", name:"pass", msg:"请填写密码"},
            {type:"min", value:6, name:"pass", msg:"用户名最少6个字"}
        ],
        onSuccess: function (d) {
            console.log('success', d);
        },
        onError: function (d) {
            console.log('error', d);
        },
        onValidationError: function (form, name, msg) {
            console.log(name, msg);
        }
    });
});

可以看到每一次点击登录按钮在右边都会有错误提示，根据错误提示用户就可以完成表单提交操作了。

但是，大家可能已经发现了一个问题，就是这个错误提示是以控制台形式打印的，真正的用户不会在这里去看错误提示的，怎么办？

下一课福哥会专门讲一讲如何提示用户操作错误信息，这会是一个很有意思的知识。

总结

今天福哥完成了JQ控件form的表单验证的功能，支持的验证规则有empty（空检查）、min（最短字符检查）、max（最长字符检查）、len（指定长度字符检查）、re（正则表达式匹配检查）几种基本验证方式，这些验证规则方式已经可以满足绝大多数的表单验证的需要了。

下一课福哥会讲一讲关于表单操作错误提示方式的内容，不同的提示方式会有这不同的用户体验，用户体验是web开发里的重中之重，大家一点要多花心思在用户体验上。