jQuery Validate插件快速入门

jQuery Validate 插件用于前端表单验证功能，简化了用户输入判定功能的编码。

使用步骤：

首先我们制作一个简单的页面，它包含了几种常用的input标签：

<!doctype html>
<html>
    <head>
        <title>Validate</title>
    </head>
    <body>
        <form action="" method = "post">
            用户名：<input type="text" name="username"><br>
            密码：<input type="password" name = "password"><br>
            确认密码：<input type="password" name = "comfirmpassword"><br>
            昵称: <input type="text" name ="nickname"><br>
            性别：
            <label><input type="radio" name = "sex" value = "male">男</label><!--这里的label用于将“男女”两个汉字也算在点击判定范围内-->
            <label><input type="radio" name = "sex" value = "female">女</label>
            <label for="sex"></label><!--这里的label用于展示性别错误提示--><br>
            邮箱：
            <input type="text" name = "email"><br>
            生日：
            <input type="text" name = "birthday"><br>
            <input type="submit" value="注册">
        </form>
    </body>
</html>

页面效果：

 

 现在是没有任何输入合法性判定的，接下来制作输入合法性判定功能

导入validate插件

<script type = "text/javascript" src = "/Market/js/jquery.validate.min.js"></script>
<script type = "text/javascript" src = "jquery.validate.min.js"></script>

编写规则代码，validate插件的使用方法是：选择需要验证的表单，调用validate方法，传入规则对象，规则对象包含规则和错误提示信息对象

 

输入错误的信息，点击提交按钮时，就会自动生成错误提示，默认错误提示的颜色是黑的，只需为error类添加的样式即可

 

<style>
            .error{
                color:red;
            }
        </style>

 

 

posted @ 2021-03-12 16:27  lucascube  阅读(91)  评论(0)    收藏  举报