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

Posted 2020-08-28 漆黑小T

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

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

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

<form class="basic_form" method="" id="form">
   <ul class="info_list">
         <li>
             <label for="username"><span>*</span>姓名</label>
             <input type="text" class="name" placeholder="请输入" maxlength="6" data-required="true" data-descriptions="username" data-describedby="username-description" name="username" id="username">

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

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

// data-descriptions="username" 错误描述信息内容
             <div id="username-description"></div>

        //id表明了错误信息提示的位置
        </li>
        <li class="select_li" id="sex_li">
               <label for="sex"><span>*</span>性别</label>
               <input type="text" class="padding_right" readonly placeholder="男" id="sex">
               <input type="hidden" value="1" class="gender" name="sex">

               //隐藏域提交

       </li>
       <li class="select_li" id="address_li">
               <label><span>*</span>现居城市</label>
               <input type="text" class="padding_right address" readonly name="address" placeholder="省份/城市" data-required="true" data-descriptions="address" data-describedby="address-description">
               <div id="address-description"></div>

              //id表明了错误信息提示的位置
               <input type="hidden" name="province" id="province">
               <input type="hidden" name="city" id="city">
        </li>
        <li class="phone">
               <label><span>*</span>手机号</label>
               <span class="def_num">+86</span>
               <input type="text" class="phone1" readonly placeholder="" class="">
               <input type="text" class="phone2" name="mobile" placeholder="请输入" class="" maxlength="11" data-validate="phone" data-describedby="phone-description">
               <div id="phone-description"></div>

              //id表明了错误信息提示的位置
    </li>
    <li>
              <label for="e-mail">邮箱</label>
              <input type="text" class="name" data-validate="email" placeholder="请输入" maxlength="30" name="email" data-describedby="email-description" id="e-mail">
              <div id="email-description"></div>

              //id表明了错误信息提示的位置
    </li>
</ul>
 <div class="btns clearfix">
             <input type="reset" value="取消" class="cancel">
             <input type="submit" value="确定" class="confirm">
</div>
</form>

js基本结构

$.mvalidateExtend({
     phone: {
     required: true,
     pattern: /^0?1[3|4|5|8][0-9]\d{8}$/,
     descriptions: {
     required: ‘<div class="field-invalidmsg">*请输入手机号码</div>‘,
     pattern: ‘<div class="field-invalidmsg">*您输入的手机号码格式不正确</div>‘,
     valid: ‘<div></div>‘
      }
   },
     password: {
     required: true,
     pattern: /^[a-zA-Z0-9]{6,20}$/,
     descriptions: {
     required: ‘<div class="field-invalidmsg">*请输入密码</div>‘,
     pattern: ‘<div class="field-invalidmsg">*您输入的密码格式不正确</div>‘,
     valid: ‘<div></div>‘
    }
 }
});

$("#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: ‘<div class="field-invalidmsg">*请输入项目名称</div>‘,
valid: ‘<div class="field-validmsg"></div>‘
},
join: {
required: ‘<div class="field-invalidmsg">*请输入参与身份</div>‘,
valid: ‘<div class="field-validmsg"></div>‘
},
time: {
required: ‘<div class="field-invalidmsg">*请选择时间</div>‘,
valid: ‘<div class="field-validmsg"></div>‘
}

}

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