简单讲解下正则的使用:
单个字符:[] 如: a [a-zA-Z0-9_]
特殊符号代表特殊含义的单个字符:\d: 单个数字字符 [0-9]\w: 单个单词字符 [a-zA-Z0-9_]
量词符号:?:表示出现 0 次或 1 次 *:表示出现 0 次或多次 +:出现 1 次或多次 {m,n}: 表示 m<= 数量 <= n* m 如果缺省: {,n}: 最多 n 次 * n 如果缺省:{m,} 最少 m 次
开始结束符号
^: 开始
$: 结束
创建
var reg = new RegExp(" 正则表达式 ");
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>