[学习交流] [广州PHP]JQ的validate的简单使用

本帖最后由 bingwei213 于 2018-10-20 09:25 编辑

[广州PHP]JQ的validate的简单使用
第一：引入Jquery.js与Jquery.validate.js.

第二：写HTML代码与JS代码。以及验证的使用。

第三：validate的默认验证规则：

第四：验证效果：

成功效果：

第五：完整代码：

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Document</title>
        <!-- 先引入jquery后再引入jquery-validate -->
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="jquery.validate.js"></script>
        <style type="text/css">
                label.error{
                        color:red;
                        margin-left:5px;
                }
        </style>
</head>
<body>
        <form id="theform" method="post">
                <p>
                        用户名：<input type="text" name="username">
                </p>
                <p>
                        邮箱：<input type="text" name="email">
                </p>
                <p>
                        密码：<input type="password" name="password" id="password">
                </p>
                <p>
                        确认密码：<input type="password" name="repassword">
                </p>
                <p>
                        <input type="submit" name="">
                </p>
        </form>
</body>
<script type="text/javascript">
        //给表单调用validate验证方法
        $("#theform").validate({
                //两个选项 
                //rules:定义验证规则
                //messages:定义对应规则不通过的提示信息
                rules:{
                        //键值对(:)
                        //name名称：规则
                        //username:'required'
                        username:{
                                required:true,
                                minlength:5
                        },
                        password:{
                                required:true,
                        },
                        repassword:{
                                required:true,
                                equalTo:'#password'
                        },
                        email:{
                                required:true,
                                email:true
                        }
                },
                messages:{
                        //name名称：对应提示信息
                        username:{
                                required:'用户名必填',
                                minlength:'用户名最少5个字符'
                        },
                        password:{
                                required:'密码必填啊',
                        },
                        repassword:{
                                required:'确认密码必填',
                                equalTo:'两次密码不一致'
                        },
                        email:{
                                required:'邮箱必填',
                                email:'邮箱格式非法'
                        }
                }
        });
</script>
</html>

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] [广州PHP]JQ的validate的简单使用

0 个回复