首页 > 代码库 > jQuery-mobilevalidate使用 的一些心得，小小总结
jQuery-mobilevalidate使用 的一些心得，小小总结
在做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="http://www.mamicode.com/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="http://www.mamicode.com/取消" class="cancel">
<input type="submit" value="http://www.mamicode.com/确定" 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>‘
}
}
//内容错误提示的内容
});
jQuery-mobilevalidate使用 的一些心得，小小总结