jQuery-mobilevalidate使用 的一些心得，小小总结

在做M站时比较纠结的是表单验证，不像pc端，移动端的验证要求插件更小更轻量，更加灵活，说不定是冒气泡的报错提示？！

介绍一款好用的移动端的表单验证插件：jQuery-mobilevalidate：

代码写的简洁一点吧，方便查看，基本结构：

   

         
• 
               *姓名
               

  //必须项，自定义描述，name值提交

  //data-required="true"必填项

  // data-describedby="username-description"错误描述信息标记

  // data-descriptions="username" 错误描述信息内容
               

          //id表明了错误信息提示的位置
         


       
• 
                 *性别
                 
                 

                 //隐藏域提交

         


       
• 
                 *现居城市
                 
                 

                //id表明了错误信息提示的位置
                 
                 
         


       
• 
                 *手机号
                 +86
                 
                 

  //自定义手机验证格式
                 

                //id表明了错误信息提示的位置
     


   
• 
                邮箱
               
               

                //id表明了错误信息提示的位置
     

 

             
             

js基本结构

$.mvalidateExtend({
     phone: {
     required: true,
     pattern: /^0?1[3|4|5|8][0-9]\d{8}$/,
     descriptions: {
     required: '

*请输入手机号码

',
     pattern: '

*您输入的手机号码格式不正确

',
     valid: '

'
      }
   },
     password: {
     required: true,
     pattern: /^[a-zA-Z0-9]{6,20}$/,
     descriptions: {
     required: '

*请输入密码

',
     pattern: '

*您输入的密码格式不正确

',
     valid: '

'
    }
 }
});

$("#item_form").mvalidate({
type: 2,

// 提示错误类型，可以自定义
onKeyup: true,
sendForm: true,
firstInvalidFocus: true,

//自动获取第一个没有通过验证的input
valid: function(event, options) {
//点击提交按钮时,表单通过验证触发函数
//alert("验证通过！接下来可以做你想做的事情啦！");
var url = $('#item_form').attr("action");
proPublic.postAjax(url, $('#item_form').serialize());
event.preventDefault();
},
invalid: function(event, status, options) {
//点击提交按钮时,表单未通过验证触发函数
},
eachField: function(event, status, options) {
//点击提交按钮时,表单每个输入域触发这个函数 this 执向当前表单输入域，是jquery对象
},
eachValidField: function(val) {
return false;
},
eachInvalidField: function(event, status, options) {},
conditional: {
   pwd2: function(val, options) {
     $("#confirmpwd2").trigger("keyup." + options.namespace);
     return true;
 },
  confirmpwd2: function(val) {
    var flag;
    return (val == $("#pwd2").val()) ? true : false;
 },

//两次密码输入
},
descriptions: {
item: {
required: '

*请输入项目名称

',
valid: '

'
},
join: {
required: '

*请输入参与身份

',
valid: '

'
},
time: {
required: '

*请选择时间

',
valid: '

'
}

}

//内容错误提示的内容
});

====禁止表单提交================

    main.stopDefault = function(event) {
        var event = event || window.event;
        //阻止默认浏览器动作(W3C)
        if (event && event.preventDefault) {
            event.preventDefault();
        } else {
            //IE中阻止函数器默认动作的方式
            window.event.returnValue = false;
            return false;
        }

    };

转载于:https://www.cnblogs.com/bug-master/p/6295646.html