博客

输入框校验插件 – jQuery validate

  • Post author:
  • Post category:其他


jquery validate插件内置了常用输入框格式的校验，同时支持添加自定义校验；



演示

<!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>

在这里插入图片描述

引入需要的JS文件后，在input 控件中添加required属性即可实现非空校验。



自定义提示文字颜色

查看页面源码发现，提示语有error样式，所以我们在页面中添加error样式即可实现提示语的样式自定义。

在页面中添加如下样式后，提示语变成了红色 

   <style type="text/css">
        .error {
            color: red;
        }
    </style>

在这里插入图片描述



设定错误提示语位置

插件默认放置错误提示语位置为 input父元素中，我们可以使用如下属性来自定义 

//default
errorPlacement: function(error, element) {  
    error.appendTo(element.parent());  
}

结果 

<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>

修改错误信息位置 

function save() {
        $('#passengerForm').validate({
            errorPlacement: function(error, element) {
                error.appendTo(element.parents(".form-group"));
            }
        });
        $('#passengerForm').valid();
    }

结果 

<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>

在这里插入图片描述

###自定义提示语

插件提供了中文素材，引用即可，当然你也可以手动修改其中的内容； 

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

或者 

$.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} 的数值")
});

在这里插入图片描述



自定义校验

$.validator.addMethod("containsChar",function(value,element,params){  
        return value.indexOf(params[0])!=-1||value.indexOf(params[1])!=-1||value.indexOf(params[1])!=-1;
    },"必须包含{0}");

在这里插入图片描述

到此为止，咱们知道了jquery validate可以对输入框进行一些校验，可以自定义错误提示信息、颜色和位置。

下面咱们看看插件自带了哪些常用格式校验：

在这里插入图片描述


版权声明：本文为zou_yufei原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。