jquery validate插件内置了常用输入框格式的校验，同时支持添加自定义校验；
演示
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.min.js"></script> </head> <body> <form id="passengerForm" class="form-horizontal form-update"> <div class="form-group"> <label class="col-sm-3 control-label"><span style="color: red;">*</span>姓名</label> <div class="col-sm-3"> <input type="text" class="input-sm form-control" required/> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-sm-4"> <button type="button" data-style="zoom-in" onclick="save()" class="ladda-button btn btn-w-m btn-primary btn-update-footer" id="btn_save">校验</button> </div> </div> </form> </body> <script type="text/javascript"> function save(){ $('#passengerForm').valid(); } </script> </html> |
1.git.gif
引入需要的JS文件后，在input 控件中添加required属性即可实现非空校验。
自定义提示文字颜色
查看页面源码发现，提示语有error样式，所以我们在页面中添加error样式即可实现提示语的样式自定义。
image.png
在页面中添加如下样式后，提示语变成了红色
|
1 2 3 4 5 |
<style type="text/css"> .error { color: red; } </style> |
|
1 |
</code><img class="" src="//upload-images.jianshu.io/upload_images/5401076-54bb9390075b4070.gif?imageMogr2/auto-orient/strip|imageView2/2/w/594/format/webp" data-original-src="//upload-images.jianshu.io/upload_images/5401076-54bb9390075b4070.gif" data-original-width="594" data-original-height="131" data-original-format="image/gif" data-original-filesize="12497" data-image-index="2" /> |
1.git.gif
设定错误提示语位置
插件默认放置错误提示语位置为 input父元素中，我们可以使用如下属性来自定义
|
1 2 3 4 |
//default errorPlacement: function(error, element) { error.appendTo(element.parent()); } |
结果
|
1 2 3 4 5 6 7 |
<div class="form-group"> <label class="col-sm-3 control-label"><span style="color: red;">*</span>姓名</label> <div class="col-sm-3"> <input type="text" class="input-sm form-control error" required=""> <label id="-error" class="error" for="">This field is required.</label> </div> </div> |
修改错误信息位置
|
1 2 3 4 5 6 7 8 |
function save() { $('#passengerForm').validate({ errorPlacement: function(error, element) { error.appendTo(element.parents(".form-group")); } }); $('#passengerForm').valid(); } |
结果
|
1 2 3 4 5 6 7 |
<div class="form-group"> <label class="col-sm-3 control-label"><span style="color: red;">*</span>姓名</label> <div class="col-sm-3"> <input type="text" class="input-sm form-control error" required=""> </div> <label id="-error" class="error" for="">This field is required.</label> </div> |
1.git.gif
自定义提示语
插件提供了中文素材，引用即可，当然你也可以手动修改其中的内容；
|
1 |
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script> |
或者
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$.extend($.validator.messages, { required: "这是必填字段", remote: "请修正此字段", email: "请输入有效的电子邮件地址", url: "请输入有效的网址", date: "请输入有效的日期", dateISO: "请输入有效的日期 (YYYY-MM-DD)", number: "请输入有效的数字", digits: "只能输入数字", creditcard: "请输入有效的信用卡号码", equalTo: "你的输入不相同", extension: "请输入有效的后缀", maxlength: $.validator.format("最多可以输入 {0} 个字符"), minlength: $.validator.format("最少要输入 {0} 个字符"), rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"), range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"), max: $.validator.format("请输入不大于 {0} 的数值"), min: $.validator.format("请输入不小于 {0} 的数值") }); |
1.git.gif
自定义校验
|
1 2 3 |
$.validator.addMethod("containsChar",function(value,element,params){ return value.indexOf(params[0])!=-1||value.indexOf(params[1])!=-1||value.indexOf(params[1])!=-1; },"必须包含{0}"); |
1.git.gif
到此为止，咱们知道了jquery validate可以对输入框进行一些校验，可以自定义错误提示信息、颜色和位置。
下面咱们看看插件自带了哪些常用格式校验：
作者：一颗北上广的心
链接：https://www.jianshu.com/p/0a83eca7ca50
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
