表单校验JQuery与正则的使用
😂 这篇文章最后更新于2047天前,您需要注意相关的内容是否还可用。
简单讲解下正则的使用:
单个字符:[]如: 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>
留言评论
暂无留言