jquery注册类型 jquery完整注册表单提交验证

转载

mob64ca13f40f3d 2023-12-06 17:21:32

文章标签 jquery注册类型 ajax form表单提交表单错误提示用户名 文章分类 jQuery 前端开发

1. 介绍

1.1 介绍

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

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

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

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

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

2. JQ控件form

2.1 Javascript

_doValidation : function(form, validations){    if(validations instanceof Array){        for(vi=0;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;},

3. 用户登录页面

3.1 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);        }    });});

jquery注册类型 jquery完整注册表单提交验证_用户名