标签:jquery 10 插件 form mobile 必须 validate true 输入
1.引入必要的JS文件
- jquery.validate.min.js (插件脚本文件)
- messages_zh.js(验证信息中文包,默认英文)
<script type="text/javascript" src="/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="/js/plugins/validate/jquery.validate.min.js"></script>
<script type="text/javascript" src="/js/plugins/validate/messages_zh.js"></script>
2.html部分代码
- 必须填的表单控件需要加上 required 属性
- 提交按钮类型为 submit
<form id="form">
<div>
<input type="text" name="username" id="username" class="form-control" placeholder="请输入用户名" required>
</div>
<div>
<input type="password" name="password" id="password" class="form-control" placeholder="请输入密码" required>
</div>
<div>
<input type="text" name="mobile" id="mobile" class="form-control" placeholder="请输入手机号" required>
</div>
<div>
<button type="submit" value="submit">
</div>
</form>
3.javascript部分代码
- rules:字段规则
- message: 字段错误提示信息,若没有定义则使用默认提示语
- submitHandeler: 可重设其他表单提交,我改为了ajax提交
//数据验证
$().ready(function () {
$.validator.addMethod("mobile", function(value, element) {
var length = value.length;
var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
return this.optional(element) || (length == 11 && mobile.test(value));
}, "请正确填写手机号码");
$('#form').validate({
rules: {
username: {
required: true,
minlength: 6
},
password: {
required: true,
minlength: 8
},
mobile: {
required: true,
mobile: true
}
},
submitHandler (form) {
$.ajax({
type: 'post',
url: 'requestUrl',
data: $('#form').serializable(),
success (res) {
...
}
})
},
invalidHandler: function(form, validator) {return false;}
})
})
4. 字段规则
1 | required:true | 必须输入的字段。 |
2 | remote:"check.php" | 使用 ajax 方法调用 check.php 验证输入值。 |
3 | email:true | 必须输入正确格式的电子邮件。 |
4 | url:true | 必须输入正确格式的网址。 |
5 | date:true | 必须输入正确格式的日期。日期校验 ie6 出错,慎用。 |
6 | dateISO:true | 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22。只验证格式,不验证有效性。 |
7 | number:true | 必须输入合法的数字(负数,小数)。 |
8 | digits:true | 必须输入整数。 |
9 | creditcard: | 必须输入合法的信用卡号。 |
10 | equalTo:"#field" | 输入值必须和 #field 相同。 |
11 | accept: | 输入拥有合法后缀名的字符串(上传文件的后缀)。 |
12 | maxlength:5 | 输入长度最多是 5 的字符串(汉字算一个字符)。 |
13 | minlength:10 | 输入长度最小是 10 的字符串(汉字算一个字符)。 |
14 | rangelength:[5,10] | 输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符)。 |
15 | range:[5,10] | 输入值必须介于 5 和 10 之间。 |
16 | max:5 | 输入值不能大于 5。 |
17 | min:10 | 输入值不能小于 10。 |
5. 效果
标签:jquery,10,插件,form,mobile,必须,validate,true,输入 来源: https://blog.csdn.net/mozhijun123456/article/details/122125165
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。