表单校验 JQuery 与正则的使用

简单讲解下正则的使用:

  1. 单个字符:[] 如: a [a-zA-Z0-9_]

    • 特殊符号代表特殊含义的单个字符:\d: 单个数字字符 [0-9]\w: 单个单词字符 [a-zA-Z0-9_]

  2. 量词符号:?:表示出现 0 次或 1 次 *:表示出现 0 次或多次 +:出现 1 次或多次 {m,n}: 表示 m<= 数量 <= n* m 如果缺省: {,n}: 最多 n 次 * n 如果缺省:{m,} 最少 m 次

  3. 开始结束符号

    • ^: 开始

    • $: 结束

创建

  1. var reg = new RegExp(" 正则表达式 ");

  2. var reg = / 正则表达式 /; 方法. test(参数): 验证指定的字符串是否符合正则定义的规范,简单示例:

  • var a="12345";
  • var reg=/^\w{6,12}$/;   // 正则   表示字符数 6 -12
  • var b=reg.test(a); // 此处 a 值不符合返回 false
  • alert(b);

下面以注册表单校验为例:

  • <!-- 导入 jquery-->
  • <script src="js/jquery-3.3.1.js"></script>
  • <script>
  •     /* 思路:
  •     *  为每个单元格建立校验
  •     *  在输入框离开焦点跟提交时候启用校验 */
  •     function checkUsername() { // 校验用户名
  •         /* 获取用户名值
  •         *  定义正则
  •         *  判断是否为 true*/
  •         var username = $("#username").val();
  •         var reg_username = /^\w{3,10}$/// 用户名为 3 -10 位字符串
  •         var flag = reg_username.test(username);
  •         if (flag) {            console.log(" 用户名合法 "// 浏览器控制台显示日志内容   实际不用写
  •             $("#username").css("border""");
  •         } else {            console.log(" 用户名不合法 ")
  •             $("#username").css("border""1px solid red");
  •         }
  •         return flag;
  •     }
  •     function checkPassword() {        var password = $("#password").val();
  •         var reg_password = /^\w{6,16}$/// 密码为 6 -10 位字符串
  •         var flag = reg_password.test(password);
  •         if (flag) {            console.log(" 密码合法 ")
  •             $("#password").css("border""");
  •         } else {            console.log(" 密码不合法 ")
  •             $("#password").css("border""1px solid red");
  •         }
  •         return flag;
  •     }
  •     function checkEmail() {        var email = $("#email").val();
  •         var reg_email = /^\w+\@\w+\.\w+$/// 符合特定格式的字符串   带 @跟.
  •         var flag = reg_email.test(email);
  •         if (flag) {            console.log(" 邮箱合法 ")
  •             $("#email").css("border""");
  •         } else {            console.log(" 邮箱不合法 ")
  •             $("#email").css("border""1px solid red");
  •         }
  •         return flag;
  •     }
  •     function checkName() {        var name = $("#name").val();
  •         var reg_name = /^\w{3,10}$/;
  •         var flag = reg_name.test(name);
  •         if (flag) {            console.log(" 姓名合法 ")
  •             $("#name").css("border""");
  •         } else {            console.log(" 姓名不合法 ")
  •             $("#name").css("border""1px solid red");
  •         }
  •         return flag;
  •     }
  •     function checkTelephone() {        var telephone = $("#telephone").val();
  •         var reg_telephone = /^\1\d{10}$/// 首位为 1 后面十位为数字
  •         var flag = reg_telephone.test(telephone);
  •         if (flag) {            console.log(" 手机合法 ")
  •             $("#telephone").css("border""");
  •         } else {            console.log(" 手机不合法 ")
  •             $("#telephone").css("border""1px solid red");
  •         }
  •         return flag;
  •     }
  •     function checkCheck() {        var check = $("#check").val();
  •         var reg_check = /^\w{4}$/// 已知验证码为四位字符
  •         var flag = reg_check.test(check);
  •         if (flag) {            console.log(" 验证码合法 ")
  •             $("#check").css("border""");
  •         } else {            console.log(" 验证码不合法 ")
  •             $("#check").css("border""1px solid red");
  •         }
  •         return flag;
  •     }
  •     $(function () {
  •         /* 当表单提交时调用校验方法 */
  •         $("#registerForm").submit(function () {            if (checkName() && checkPassword() && checkName() && checkEmail() && checkTelephone() && checkCheck()) {                $.post("user/regist", $(this).serialize(), function (data) { //serialize() 序列化表单内容
  •                     if (data.flag) { // 从服务器获取注册结果
  •                         console.log(" 注册成功 ")
  •                         location.href = "regist_ok.html"// 注册成功跳转页面
  •                     } else {                        console.log(" 注册失败 ")
  •                         $("#errorMsg").html(data.errorMsg); // 注册失败显示错误信息
  •                     }
  •                 })
  •             }
  •         });
  •         $("#username").blur(checkUsername); // 鼠标离开输入框执行事件
  •         $("#password").blur(checkPassword); // 注意方法名后不要加 (),否则失焦事件将无异议
  •         $("#email").blur(checkEmail);
  •         $("#name").blur(checkName);
  •         $("#telephone").blur(checkTelephone);
  •         $("#check").blur(checkCheck);
  •     })
  • </script>


手机扫描二维码访问

本文标题:《表单校验 JQuery 与正则的使用》作者:极四维博客
原文链接:https://cway.top/post/106.html
特别注明外均为原创,转载请注明。

分享到微信

扫描二维码

可在微信查看或分享至朋友圈。

相关文章

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

«    2025年3月    »
12
3456789
10111213141516
17181920212223
24252627282930
31

搜索

控制面板

您好,欢迎到访网站!
  查看权限

最新留言

文章归档

  • 订阅本站的 RSS 2.0 新闻聚合