JQuery表单验证插件jquery.validate的使用

最新推荐文章于 2024-03-14 07:00:00 发布

酸霉汤

最新推荐文章于 2024-03-14 07:00:00 发布

阅读量294

点赞数

分类专栏：前端 # JQuery 文章标签： jquery javascript html5

本文链接：https://blog.csdn.net/itaylorfan/article/details/120607958

版权

前端同时被 2 个专栏收录

21 篇文章 1 订阅

订阅专栏

JQuery

5 篇文章 0 订阅

订阅专栏

本文介绍了如何在HTML表单中使用jQuery Validate插件进行验证，并展示了如何设置自定义验证规则。示例代码包括了学号、性别、年龄、手机号码和班级等字段的验证，同时详细说明了错误提示信息的定位方法和自定义验证方法的添加。通过这些方法，可以确保用户输入的数据符合预设格式，提高了表单数据的准确性。

摘要由CSDN通过智能技术生成

引入文件

<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.validate.js"></script>
<script src="./js/messages_zh.js"></script>

普通用法

<body>
    <form action="" id="registerForm">
        <div class="form-item">
            <div class="label-box">学号</div>
            <div class="input-box">
                <input type="text" class="txt" name="sno">
            </div>
            <!-- 存放错误信息 -->
            <div class="error-msg"></div>

        </div>
        <div class="form-item">
            <div class="label-box">性别</div>
            <div class="input-box">
                <input type="text" class="txt" name="sex">
            </div>
            <div class="error-msg"></div>

        </div>
        <div class="form-item">
            <button type="button" id="btn-register">
                注册
            </button>
        </div>
    </form>
</body>

//js代码
$(function(){
        var formvalidate=$("#registerForm").validate({
            // 验证规则
            rules:{
                sno:{
                   required:true,
                   RegTest:"^H2103(?!0000)\\d{4}$"
                },
                sex:{
                    required:true,
                    RegTest:"^[男女]$"
                }
            },
            // 验证不能通过以后的提示信息
            messages:{
                sno:{
                    required:"请输入学号",
                    RegTest:"学号格式不正确"
                },
                sex:{
                    required:"请输入性别",
                    RegTest:"性别输入错误"
                },
          
            },
            // 验证不能通过的提示信息应该放在哪里
            errorPlacement:function(errorElement,currentElement){
                //errorElement代表产生的错误信息的元素 是一个JQuery对象
                //currentElement代表当前表单正在验证的元素 是一个JQuery对象
                currentElement.parent().next().append(errorElement)
            },
            errorClass:"error-tips"
        });

        $("#btn-register").on("click",function(event){
            //验证一下表单里面的规则是否通过
            if(formvalidate.form()){
                alert("验证通过")
            }else{
                // 验证没有通过

            }
        })
        // 添加自定义验证方法
        $.validator.addMethod("RegTest", function(value, element,params) { //要验证的值 元素  函数自定义参数
            var reg=new RegExp(params);
            return reg.test(value);
        }, "请输入正确格式！");
    });

使用自定义属性

<body>
    <div class="container">
        <div class="page-header">
            <h2 class="text-center text-primary">添加学生信息</h2>
        </div>
        <form class="form-horizontal" id="addStuInfo">
            <div class="form-group">
                <label class="control-label col-md-2">学生姓名</label>

                <div class="col-md-7">
                    <input type="text" placeholder="请输入学生姓名" id="sname" class="form-control"
                        data-rule-required="true" data-msg-required="学生姓名不能为空">
                </div>

                <div class="col-md-3 tip"></div>
            </div>

            <div class="form-group">
                <label class="control-label col-md-2">学生性别</label>

                <div class="col-md-7">
                    <select name="" id="ssex" class="form-control">
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </div>

                <!-- <div class="col-md-3 tip">用户名不能为空</div> -->
            </div>
            <div class="form-group">
                <label class="control-label col-md-2">学生年龄</label>

                <div class="col-md-7">
                    <input type="text" id="sage" placeholder="请输入学生年龄" class="form-control" data-rule-range="[18,65]"
                        data-rule-required="true" data-msg-required="年龄不能为空" data-rule-RegTest="^\d+$">
                </div>

                <div class="col-md-3 tip"></div>
            </div>

            <div class="form-group">
                <label class="control-label col-md-2">手机号码</label>

                <div class="col-md-7">
                    <input type="text" id="stel" placeholder="请输入手机号码" class="form-control" data-rule-required="true"
                        data-msg-required="手机号不能为空"
                        data-rule-RegTest="^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$">
                </div>

                <div class="col-md-3 tip"></div>
            </div>


            <div class="form-group">
                <label class="control-label col-md-2">所属班级</label>

                <div class="col-md-7">
                    <input type="text" id="cname" placeholder="请输入所属班级" class="form-control" data-rule-required="true"
                        data-msg-required="学号不能为空" data-rule-RegTest="^[HJ]210[1-9]$">
                </div>

                <div class="col-md-3 tip"></div>
            </div>

            <div class="form-group">
                <label class="control-label col-md-2">家庭地址</label>

                <div class="col-md-7">
                    <input type="text" id="address" maxlength="100" placeholder="请输入家庭地址" class="form-control"
                        data-rule-required="true" data-msg-required="地址不能为空">
                </div>

                <div class="col-md-3 tip"></div>
            </div>

            <div class="form-group">
                <label class="control-label col-md-2">爱好</label>

                <div class="col-md-7">
                    <label class="checkbox-inline">
                        <!-- 复选框组只在第一个添加即可 name要相同 -->
                        <input type="checkbox" name="hobby" id="inlineCheckbox1" data-rule-required="true" data-msg-required="必须最少选一个爱好" value="看书"> 看书
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" name="hobby" id="inlineCheckbox2" value="睡觉"> 睡觉
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" name="hobby" id="inlineCheckbox3" value="晚游戏"> 玩游戏
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" name="hobby" id="inlineCheckbox4" value="逛街"> 逛街
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" name="hobby" id="inlineCheckbox5" value="写代码"> 写代码
                    </label>
                </div>

                <div class="col-md-3 tip"></div>
            </div>

            <div class="form-group">
                <div class="col-md-7 col-md-offset-2">
                    <button type="button" class="btn btn-primary" id="saveData">保存数据</button>
                    <button type="button" class="btn btn-warning" id="goBack">返回列表</button>
                </div>
            </div>
        </form>
    </div>
</body>

$(function () {
        // 表单验证
        var formvalidate = $("#addStuInfo").validate({
            // 验证不能通过的提示信息应该放在哪里
            errorPlacement: function (errorElement, currentElement) {
                //errorElement代表产生的错误信息的元素 是一个JQuery对象
                //currentElement代表当前表单正在验证的元素 是一个JQuery对象
                
                // 多选框结构不同
                if(currentElement.attr("name")=="hobby"){
                    currentElement.parent().parent().next().append(errorElement)
                }else{
                    currentElement.parent().next().append(errorElement)
                }
            },
            errorClass: "error-tips"
        });

        // 检验是否通过 
        $("#saveData").on("click", function (event) {
            //验证一下表单里面的规则是否通过
            if (formvalidate.form()) {
                // alert("验证通过")
            } else {
                // 验证没有通过
            }
        })
        // 添加自定义验证方法
        $.validator.addMethod("RegTest", function (value, element, params) { //要验证的值 元素  函数自定义参数
            var reg = new RegExp(params);
            return reg.test(value);
        }, "请输入正确格式！");
    })

官方文档
 参考文章

酸霉汤

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery表单验证插件jquery.validate的使用

引入文件<script src="./js/jquery.min.js"></script><script src="./js/jquery.validate.js"></script><script src="./js/messages_zh.js"></script>普通用法<body> <form action="" id="registerForm"> <div
复制链接

扫一扫

专栏目录