<!--

    需求：
        用户注册页面要有用户名、密码、确认密码、邮箱
        用户名文本框：用户名不能为空，且必须为数字与字母的6到12位的组合
        密码框：密码不能为空，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符
        确认密码框：确认密码不能为空，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符，并且要和密码框中的内容保持一致
        邮箱框：邮箱需要输入正确的邮箱格式并且不能为空
-->

效果图：


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>JQUERY</title>
    <script src="jquery-3.3.1.js"></script>
    <script src="formValidator4.0.1/formValidator-4.0.1.js"></script>
    <script src="formValidator4.0.1/formValidatorRegex.js"></script>
    <link type="text/css" rel="stylesheet" href="formValidator4.0.1/style/validator.css">
    //rel并不能省略，省略了就看不到小图片的显示了
</head>
<fieldset>
    <legend>用户注册页面</legend>
    <form>
        <table>
            <tr>
                <td>用户名:</td>
                <td><input type="text" id="username"></td>
                <td>
                    <div id="usernameTip"></div>
                </td>
            </tr>
            <tr>
                <td>密码:</td>
                <td><input type="password" id="pwd"></td>
                <td>
                    <div id="pwdTip"></div>
                </td>
            </tr>
            <tr>
                <td>确认密码:</td>
                <td><input type="password" id="repwd"></td>
                <td>
                    <div id="repwdTip"></div>
                </td>
            </tr>
            <tr>
                <td>邮箱:</td>
                <td><input type="email" id="email"/></td>
                <td>
                    <div id="emailTip"></div>
                </td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" id="submit"></td>
                <td></td>
            </tr>
        </table>
    </form>
</fieldset>
<body>
</body>

</html>
<script type="text/javascript">
    $.formValidator.initConfig({
        validatorGroup: "1",
        submitOnce: true,
        onSuccess: function () {
            alert("表单验证成功");
        },
        onError: function () {
            alert("表单验证失败");
        }
    });

    $("#username").formValidator({
        validatorGroup: "1",
        onShow: "请输入用户名",
        onEmpty:"用户名不能为空",
        onFocus: "请输入用户名，由6-12位数字或英文字母的组合",
        onCorrect: "用户名输入正确",
    }).inputValidator({
        type: "size",
        max: 12,
        min: 6,
        onError: "用户名长度错误"
    }).regexValidator({
        regExp: "^[a-zA-z0-9]{6,12}$",
        dataType: "string",
        onError: "用户名输入格式错误。"
    });

    //密码
    $("#pwd").formValidator({
        validatorGroup: "1",
        onShow: "请输入密码",
        onEmpty:"密码不能为空",
        onFocus: "请输入密码，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符",
        onCorrect: "密码输入正确"
    }).inputValidator({
        type: "size",
        max: 12,
        min: 6,
        onError: "密码长度错误",
    }).regexValidator({
        //密码强度正则，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符
        regExp: "^.*(?=.{6,12})(?=.*\\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$",
        dataType: "string",
        onError: "密码格式错误，请重新输入！"
    });

    //确认密码
    $("#repwd").formValidator({
        validatorGroup: "1",
        onShow: "请再确认密码",
        onEmpty:"确认密码不能为空",
        onFocus: "请再次输入密码，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符",
        onCorrect: "确认密码输入正确"
    }).inputValidator({
        type: "size",
        max: 12,
        min: 6,
        onError: "确认密码长度错误",
    }).regexValidator({
        //密码强度正则，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符
        regExp: "^.*(?=.{6,12})(?=.*\\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$",
        dataType: "string",
        onError: "确认密码格式错误，请重新输入！"
    }).compareValidator({
        desID: "pwd",//注意这里的pwd不能再加#号
        operateOr: "=",
        dataType: "string",
        onError: "两次密码输入不一致，请重新输入。"
    });

    //邮箱
    $("#email").formValidator({
        validatorGroup: "1",
        onShow: "请输入邮箱地址",
        onEmpty:"邮箱不能为空",
        onFocus: "请输入正确的邮箱格式",
        onCorrect: "恭喜，邮箱输入正确",
    }) .regexValidator({
        regExp: "^([A-Za-z0-9_\\-\\.])+\\@([A-Za-z0-9_\\-\\.])+\\.([A-Za-z]{2,4})$",
        dataType: "string",
        onError: "邮箱格式输入错误"
    });
    /*
    邮箱这块使用inputValidator就会出现始终为空的现象，不知道为什么，
    .inputValidator({
        type: "size",
        max: 12,
        min: 1,
        onError: "邮箱不能为空",
    })
     */
</script>

---恢复内容结束---

<!--
    需求：
        用户注册页面要有用户名、密码、确认密码、邮箱
        用户名文本框：用户名不能为空，且必须为数字与字母的6到12位的组合
        密码框：密码不能为空，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符
        确认密码框：确认密码不能为空，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符，并且要和密码框中的内容保持一致
        邮箱框：邮箱需要输入正确的邮箱格式并且不能为空
-->

效果图：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>JQUERY</title>
    <script src="jquery-3.3.1.js"></script>
    <script src="formValidator4.0.1/formValidator-4.0.1.js"></script>
    <script src="formValidator4.0.1/formValidatorRegex.js"></script>
    <link type="text/css" rel="stylesheet" href="formValidator4.0.1/style/validator.css">
    //rel并不能省略，省略了就看不到小图片的显示了
</head>
<fieldset>
    <legend>用户注册页面</legend>
    <form>
        <table>
            <tr>
                <td>用户名:</td>
                <td><input type="text" id="username"></td>
                <td>
                    <div id="usernameTip"></div>
                </td>
            </tr>
            <tr>
                <td>密码:</td>
                <td><input type="password" id="pwd"></td>
                <td>
                    <div id="pwdTip"></div>
                </td>
            </tr>
            <tr>
                <td>确认密码:</td>
                <td><input type="password" id="repwd"></td>
                <td>
                    <div id="repwdTip"></div>
                </td>
            </tr>
            <tr>
                <td>邮箱:</td>
                <td><input type="email" id="email"/></td>
                <td>
                    <div id="emailTip"></div>
                </td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" id="submit"></td>
                <td></td>
            </tr>
        </table>
    </form>
</fieldset>
<body>
</body>

</html>
<script type="text/javascript">
    $.formValidator.initConfig({
        validatorGroup: "1",
        submitOnce: true,
        onSuccess: function () {
            alert("表单验证成功");
        },
        onError: function () {
            alert("表单验证失败");
        }
    });

    $("#username").formValidator({
        validatorGroup: "1",
        onShow: "请输入用户名",
        onEmpty:"用户名不能为空",
        onFocus: "请输入用户名，由6-12位数字或英文字母的组合",
        onCorrect: "用户名输入正确",
    }).inputValidator({
        type: "size",
        max: 12,
        min: 6,
        onError: "用户名长度错误"
    }).regexValidator({
        regExp: "^[a-zA-z0-9]{6,12}$",
        dataType: "string",
        onError: "用户名输入格式错误。"
    });

    //密码
    $("#pwd").formValidator({
        validatorGroup: "1",
        onShow: "请输入密码",
        onEmpty:"密码不能为空",
        onFocus: "请输入密码，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符",
        onCorrect: "密码输入正确"
    }).inputValidator({
        type: "size",
        max: 12,
        min: 6,
        onError: "密码长度错误",
    }).regexValidator({
        //密码强度正则，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符
        regExp: "^.*(?=.{6,12})(?=.*\\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$",
        dataType: "string",
        onError: "密码格式错误，请重新输入！"
    });

    //确认密码
    $("#repwd").formValidator({
        validatorGroup: "1",
        onShow: "请再确认密码",
        onEmpty:"确认密码不能为空",
        onFocus: "请再次输入密码，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符",
        onCorrect: "确认密码输入正确"
    }).inputValidator({
        type: "size",
        max: 12,
        min: 6,
        onError: "确认密码长度错误",
    }).regexValidator({
        //密码强度正则，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符
        regExp: "^.*(?=.{6,12})(?=.*\\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$",
        dataType: "string",
        onError: "确认密码格式错误，请重新输入！"
    }).compareValidator({
        desID: "pwd",//注意这里的pwd不能再加#号
        operateOr: "=",
        dataType: "string",
        onError: "两次密码输入不一致，请重新输入。"
    });

    //邮箱
    $("#email").formValidator({
        validatorGroup: "1",
        onShow: "请输入邮箱地址",
        onEmpty:"邮箱不能为空",
        onFocus: "请输入正确的邮箱格式",
        onCorrect: "恭喜，邮箱输入正确",
    }) .regexValidator({
        regExp: "^([A-Za-z0-9_\\-\\.])+\\@([A-Za-z0-9_\\-\\.])+\\.([A-Za-z]{2,4})$",
        dataType: "string",
        onError: "邮箱格式输入错误"
    });
    /*
    邮箱这块使用inputValidator就会出现始终为空的现象，不知道为什么，
    .inputValidator({
        type: "size",
        max: 12,
        min: 1,
        onError: "邮箱不能为空",
    })
     */
</script>

JQuery+formValidator实现表单验证的更多相关文章

  1. 基于jQuery的Validate表单验证

    表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~  而我工作中用到最多的就是基于基于jQuery的Validate表单验证~  就向下面这样~ 因为今天有个朋 ...

  2. jquery.validation.js 表单验证

    jquery.validation.js 表单验证   官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...

  3. Jquery.validate.js表单验证插件的使用

    作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...

  4. 基于Jquery Validate 的表单验证

    基于Jquery Validate 的表单验证 jquery.validate.js是jquery下的一个验证插件,运用此插件我们可以很便捷的对表单元素进行格式验证. 在讲述基于Jquery Vali ...

  5. 异步提交form的时候利用jQuery validate实现表单验证

    异步提交form的时候利用jQuery validate实现表单验证相信很多人都用过jquery validate插件,非常好用,并且可以通过下面的语句来自定义验证规则    // 电话号码验证    ...

  6. 基于Bootstrap+jQuery.validate Form表单验证实践

    基于Bootstrap jQuery.validate Form表单验证实践 项目结构 :     github 上源码地址:https://github.com/starzou/front-end- ...

  7. jQuery.validate.js表单验证插件

    jQuery.validate.js表单验证插件的使用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head& ...

  8. jQuery Validation Engine 表单验证，自定义规则验证方法

    jQuery Validation Engine 表单验证说明文档http://code.ciaoca.com/jquery/validation-engine/ js加到jquery.validat ...

  9. 自己编写jQuery插件之表单验证

    自己编写jQuery插件之表单验证 吐个嘈先:最近状态不咋滴,真是什么都不想干,不想上班,做什么都没动力,觉得没意思.不想这样,不想这样,快让这种情绪消失吧,忽忽.... 表单验证在项目中用的还是比较 ...

随机推荐

  1. MQTT研究之EMQ：【基础研究】

    EMQ版本V2, emqttd-centos7-v2.3.11-1.el7.centos.x86_64.rpm 下载地址:http://emqtt.com/downloads/2318/centos7 ...

  2. Internet Explorer 安全区域注册表项说明

    引用网址:http://support.microsoft.com/kb/182569/zh-cnInternet Explorer 安全区域设置存储在以下注册表子项下面: HKEY_LOCAL_MA ...

  3. 怎么安装Scrapy框架以及安装时出现的一系列错误（win7 64位 python3 pycharm）

    因为要学习爬虫,就打算安装Scrapy框架,以下是我安装该模块的步骤,适合于刚入门的小白: 一.打开pycharm,依次点击File---->setting---->Project---- ...

  4. ssh 端口转发实践

    A: 172.28.92.114 本地主机B: 172.28.92.117 中间主机C: 172.28.92.118 目的主机 (这里名字叫目的主机更合适,原先把这里叫成远程主机,导致我一直认为远程端 ...

  5. java web开发环境tomcat安装配置

    1.下载jdk8并安装 2.下载tomcat windows环境下的免安装版zip包 3.设置两个环境变量 4.在tomcat的bin路径下双击startup.bat 启动tomcat服务器 5.使用 ...

  6. 转载 修改oracle用户密码永不过期

    1.查看用户的proifle是哪个,一般是default: sql>SELECT username,PROFILE FROM dba_users; 2.查看指定概要文件(如default)的密码 ...

  7. electron+antd详细教程

    第一步: 要做一个electron项目,理论上我们应该从electron-quick-start开始,就是说我们需要如下3个文件: package.json,node工程最基本的要求,类似于Java的 ...

  8. Java垃圾回收（整理）

    Java垃圾回收 Garbage Collection:GC: 什么样的对象才是垃圾?怎样判断一个对象引用是不是垃圾? 垃圾回收算法:Mark-Sweep(标记-清除)算法,Copying(复制)算法 ...

  9. Appium java环境搭建(Windows版)

    注意:如果初次学习appium的话,则需要你做好准备因为安装过程并不简单 1.安装appium Appium 官方网站:http://appium.io/ 安装Appium之前需要先安装node.js ...

  10. Android 开发 存储目录的详解

    简介 Android设备,有3个地方的文件存储位置,他们分别是: 内部存储空间(用户无法浏览到此目录) 外部存储空间(就是手机自身的文件管理目录,用户可以浏览) SD卡的存储空间(需要插入T卡) Sh ...