jquery 封装表单验证以及ajax提交请求
2016-06-21 12:13:19 小德 前端 访问次数 1112


模仿validform.js实现常见的表单验证封装以及ajax异步请求。

新建文件命名为xcheck.js

 // 检查数据类型
function checkType(datatype,param){
    var regBox = {
        regEmail : /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/,//邮箱
        regName : /^(?![0-9]+$)[0-9A-Za-z]{4,16}$/,//用户名
        regMobile : /^0?1[3|4|5|8][0-9]\d{8}$/,//手机
        regTel : /^0[\d]{2,3}-[\d]{7,8}$/
           }
    if( datatype == 'mobile'){ //手机
        var mflag = regBox.regMobile.test(param);
        if( !mflag ) return 0;
    }else if( datatype == 'name'){ // 整数
        var mflag = regBox.regName.test(param);
        if( !mflag ) return 0;
    }
    return 1;

 }

 var flag = checkType(datatype,param); // 验证类型
    if( flag == 0 ){
        obj.next().html(errmsg);
        obj.next().show();
        return false;
    }


//如果是json 数据 则转换成json  如果是字符串 则直接返回

function parseRe(V){
    try{
        return $.parseJSON(V);
    }catch(e){
        return V;
    }
}


    // 公共监听需要请求的元素
$(document).on('change','.needchk', function(){
    var param = $(this).val();
    var name = $(this).attr('name');
    var ajaxurl = $(this).attr('ajaxurl');
    var datatype = $(this).attr('datatype');
    var errmsg = $(this).attr('errmsg');
    var obj = $(this);

    var flag = checkType(datatype,param); // 验证类型
    if( flag == 0 ){
        obj.next().html(errmsg);
        obj.next().show();
        return false;
    }

    // ajax提交  
    $.post(
        ajaxurl,
        { param: param,name:name },
        function( V ){
            V = parseRe(V); 
//           if (V.status=='y') { }else { }
            var tmp = '';
            if( V.info ) tmp = V.info;
            else tmp = V;
            obj.next().html(tmp);
            obj.next().show();
        }
    );
});


使用实例:

<style>
            p.info{
                display:none;
                margin-top: -15px;
                color: red;
            }
</style>

//校验nameinput框

    <input type="text" class="needchk" id="u_name" ajaxurl="ajaxurl" datatype="name" errmsg="名字错误" placeholder="请输入4-16位字符用户名">
    <p class="info"></p>