Loading... ## JavaScript验证表单内容 **概述:** JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。 表单数据经常需要使用 JavaScript 来验证其正确性: * 验证表单数据是否为空? * 验证输入是否是一个正确的email地址? * 验证日期是否输入正确? * 验证表单输入内容是否为数字型? **作用:** 保证输入的数据符合要求、减轻服务器的压力 **实现思路:** 1. 获得表单元素值 2. 使用JavaScript的一些方法对数据进行判断 3. 当表单提交时,触发事件,对获取的数据进行验证,并对不合法数据进行提示 **案例演示基础(后续案例均在此案例基础之上完成,已省略样式及部分页面):** ```html <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>青鸟技术栈-注册页面</title> <link href="./css/style.css" rel="stylesheet" type="text/css"> </head> <body class="body"> <div class="warp"> <form> <div class="form" id="form" name="myform" action="#" method="get"> <div class="form-title"> <span>青鸟技术栈-注册账号</span> <strong class="to-login"> <a href="login.html">已有账号?立即登录</a> </strong> </div> <div class="form-main"> <div class="form-list"> <span>昵称</span> <div class="form-text"> <input type="text" name="user" /> </div> </div> <div class="form-list"> <span>邮箱</span> <div class="form-text"> <input type="text" id="email"> </div> <strong class="to-regEmail"> <a href="regEmail.html">没有邮箱?立即申请</a> </strong> </div> <div class="form-list"> <span>密码</span> <div class="form-text"> <input type="password" name="password" /> </div> </div> <div class="form-list"> <span>再次密码</span> <div class="form-text"> <input type="password" name="password1" /> </div> </div> <div class="form-list gender"> <span>性别</span> <div class="form-text"> <label><input type="radio" value="男" name="gender" checked> 男</label> <label><input type="radio" value="女" name="gender"> 女</label> </div> </div> <div class="form-list"> <span>生日</span> <div class="form-text"> <select> <option>2022年</option> </select> <select> <option>1月</option> </select> <select> <option>22日</option> </select> </div> </div> <div class="form-list"> <span>爱好</span> <div> <div class="ortherinput"> <input type="checkbox" />读书 <input type="checkbox" />编程 <input type="checkbox" />运动 </div> </div> </div> <div class="form-list"> <span>头像</span> <div> <div class="ortherinput"> <input type="image" src="images/default.jpg" width="90px" height="80px" /> <input type="file" /> </div> </div> </div> <div class="form-list"> <span>所在地</span> <div class="form-text"> <select> <option>河北省</option> </select> <select> <option>秦皇岛市</option> </select> <select> <option>北戴河区</option> </select> </div> </div> <div class="form-list"> <span>手机号</span> <div class="form-text"> <input type="text" id="mobile"> </div> </div> <div class="prompt"> <p>可通过该手机号码快速找回密码</p> <p> 中国大陆地区以外手机号码 <a href="javascript:void(0);" id="showcode"> 点击这里</a></p> </div> <div class="code"> <input type="text" /><span>获取短信验证码</span> </div> <div class="submit"> <input type="submit" id="submit" value="注册" /> <input type="reset" id="reset" value="重置" /> </div> <div class="deal"> <p><label><input type="checkbox" class="acc" id="deal" checked />我已阅读并同意相关服务条款和隐私政策</label> </p> <span></span> <div class="deal-list"> <a href="#">《服务协议》</a> <a href="#">《隐私政策》</a> <a href="questionnaire.html"><strong>参与满意度问卷调查</strong></a> </div> </div> </div> </form> </div> </body> </html> ``` **案例下载:**[青鸟技术栈-登录页面-表单验证基础页面.zip](https://www.jbea.cn/usr/uploads/2022/09/1522014209.zip) **案例显示效果:** ![效果图](https://www.jbea.cn/usr/uploads/2022/09/3371366484.png) ### 表单选择器 #### jQuery表单选择器 | 语法 | 描述 | | --------- | ------------------------------------------- | | :input | 匹配所有input、textarea、select和button元素 | | :text | 匹配所有单行文本框 | | :password | 匹配所有密码框 | | :radio | 匹配所有单项按钮 | | :checkbox | 匹配所有复选框 | | :image | 匹配所有图像域 | | :file | 匹配所有文件域 | | :reset | 匹配所有重置按钮 | | :button | 匹配所有按钮 | | :submit | 匹配所有提交按钮 | #### jQuery表单属性过滤选择器 | 语法 | 描述 | | --------- | -------------------------------------------------------- | | :enabled | 匹配所有可用元素 | | :disabled | 匹配所有不可用元素 | | :checked | 匹配所有被选中元素(复选框、单项按钮、select中的option) | | :selected | 匹配所有选中的option元素 | ### 表单校验与提示特效 ### 使用jQuery脚本实现如下要求: ![演示效果](https://www.jbea.cn/usr/uploads/2022/09/404138937.png) 当用户点击“登录”按钮后,在HTML表单提交到服务器端之前对内容格式进行如下验证: * 判断邮箱是否为空。如果为空,则弹出警告框,并给出提示 * 判断邮箱是否为空、邮箱格式是否正确(需要包含‘@’、‘.’,且‘.’的位置在‘@’之后,‘@’不能作为第一个字符),如不满足条件,则弹出警告框,并给出提示 * 判断密码是否为空,如果为空,则弹出警告框,并给出提示 **演示案例:** ```javascript $(function () { $("form").submit(function () { let email = $("#email").val(); //获取到邮箱的值 let password = $("#password").val(); //获取到密码的值 //1.判断邮箱是否为空 if (email == "") { alert("邮箱不能为空"); return false; } let emialIndex = email.indexOf('@'); let dotIndex = email.indexOf('.'); //2.使用indexOf()方法判断邮箱是否包含“@”和“.”字符 if (emialIndex == -1 || dotIndex.indexOf(".") == -1) { alert("邮箱格式不正确,必须包含@和."); return false; } //使用indexOf()方法判断邮箱的首字符是否为“@”字符 if (emialIndex == 0) { alert("邮箱格式不正确,不能以@开头"); return false; } if (emialIndex > dotIndex) { alert("邮箱格式不正确,@不能在.之后"); return false; } //3.判断密码是否为空 if (password == "") { alert("密码不能为空"); return false; } //4.判断密码长度大于或等于8个字符 if (password.length < 8) { alert("密码必须大于或等于8个字符"); return false; } return true; }) }) ``` <div class="tip inlineBlock error simple"> **📢弊端:** 每当用户点击登录按钮后,系统都将以警告框的形式弹出对应的信息。这种操作存在如下问题: 1. 用户填写完全部表单并提交时才进行校验,错误提示不及时 2. 使用警告框提示错误,用户体验不友好 **🤔如何修正?** 1. 在文本框失去焦点时触发验证 2. 在文本框的后面添加页面元素,用于存放错误提示信息 3. 使用jQuery的html( )方法,动态设置提示信息 </div> ![image.png](https://www.jbea.cn/usr/uploads/2022/09/2857320808.png) **演示案例:** 在对应的文本框区域之后添加相应的错误提示标签 ```html <div class="form-list"> <span>邮箱</span> <div class="form-text"> <input type="text" id="email"> </div> <!-- 在对应的区域添加错误信息显示标签 --> <b id="email_msg"></b> </div> ``` 当验证失败时,修改错误提示标签的显示文本,并修改样式 ```javascript $(function () { //代码块1:为表单元素绑定blur事件处理函数 $("#email").blur(CheckEmail); $("#password").blur(CheckPassword); //代码块2:点击登录按钮提交表单 $("form").submit(function () { //邮箱和密码验证成功后提交表单 if (CheckEmail() && CheckPassword()) { return true; } return false; }) //代码块3:邮箱校验+密码校验 //邮箱校验 function CheckEmail() { var email = $("#email").val(); //获取到邮箱的值 var email_msg = $("#email_msg"); //提示信息元素 email_msg.html(""); //判断邮箱是否为空 if (email == "") { email_msg.html("*邮箱不能为空"); return false; } let emialIndex = email.indexOf('@'); let dotIndex = email.indexOf('.'); //使用indexOf()方法判断邮箱是否包含“@”和“.”符号 if (emialIndex == -1 || dotIndex == -1) { email_msg.html("*邮箱格式不正确,必须包含@和."); return false; } //使用indexOf()方法判断邮箱的首字符是否为“@”符号 if (emialIndex == 0) { email_msg.html("*邮箱格式不正确,不能以@开头"); return false; } if (emialIndex > dotIndex) { email_msg.html("*邮箱格式不正确,@不能在.之后"); return false; } return true; } //密码校验 function CheckPassword() { var password = $("#password").val(); //获取到密码的值 var password_msg = $("#password_msg"); //提示信息元素 password_msg.html(""); //判断密码是否为空 if (password == "") { password_msg.html("*密码不能为空"); return false; } //判断密码长度大于或等于8个字符 if (password.length < 8) { password_msg.html("*密码必须大于或等于8个字符"); return false; } return true; } }) ``` ## 正则表达式验证 ### 初识正则表达式 **概述:** 正则表达式(regular expression)描述了一种字符串匹配的模式(pattern),可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。 #### 定义正则表达式 **语法:**`let reg = /表达式规则/附加参数` **表达式规则:** | 符号 | 描述 | | ----- | ------------------------------------------------------- | | /…/ | 代表一个模式的开始和结束 | | ^ | 匹配字符串的开始 | | $ | 匹配字符串的结束 | | \s | 任何空白字符 | | \S | 任何非空白字符 | | \d | 匹配一个数字字符,等价于 `[0-9]` | | \D | 除了数字之外的任何字符,等价于 `[^0-9]` | | \w | 匹配一个数字、下划线或字母字符,等价于 `[A-Za-z0-9_]` | | \W | 任何非单字字符,等价于 `[^a-zA-z0-9_]` | | . | 除了换行符之外的任意字符 | | {n} | 匹配前一项n次 | | {n,} | 匹配前一项n次,或者多次 | | {n,m} | 匹配前一项至少n次,但是不能超过m次 | | * | 匹配前一项0次或多次,等价于 `{0,}` | | + | 匹配前一项1次或多次,等价于 `{1,}` | | ? | 匹配前一项0次或1次,即前一项是可选的,等价于 `{0,1}` | **附加参数:** | 附加参数 | 含义 | 描述 | | ----------- | ------------------------------------ | -------------------------------------------------------------------------------------------------------------------- | | **i** | ignore - 不区分大小写 | 将匹配设置为不区分大小写,搜索时不区分大小写: A 和 a 没有区别。 | | **g** | global - 全局匹配 | 查找所有的匹配项。 | | **m** | multi line - 多行匹配 | 使边界字符**^** 和**$** 匹配每一行的开头和结尾,记住是多行,而不是整个字符串的开头和结尾。 | | **s** | 特殊字符圆点**.** 中包含换行符**\n** | 默认情况下的圆点**.** 是匹配除换行符**\n** 之外的任何字符,加上**s** 修饰符之后, **.** 中包含换行符 \n。 | **特殊符号:** []:定义匹配的字符串,如 `[a-zA-Z]`表示匹配字母 `a-z`和 `A-Z` {}:用于匹配长度,如 `\d{4}`表示匹配四个数字 ():是为了提取匹配到的字符串,表达式中有几个 `()`就有几个相应的匹配字符串 **RegExp对象的方法:** | 方法 | 描述 | | --------------------- | ------------------------------------------------------------------------------------------ | | exec(String):string | 检索一个字符串是否匹配某个模式。如果字符串中含有匹配的文本,则返回匹配的结果;否则返回null | | test(String):boolean | 检索一个字符串是否匹配某个模式。如果字符串中含有匹配的文本,则返回true;否则返回false | **String对象的方法:** | 方法 | 描述 | | ------------------------------------ | ------------------------------------------------------------------ | | match(RegExp) | 找到一个或多个正则表达式的匹配 | | search(RegExp) | 返回字符串中第一个与正则表达式相匹配的子串的起始位置 | | replace(RegExp/String, replacement) | 替换字符串中与正则表达式匹配的子串替换为replacement | | split( separator, n ) | 以separator为边界,将字符串分割为字符串数组,n为限制输出数组的个数 | **演示案例:** ```javascript //i 修饰符为不区分大小写匹配,实例如下: var str="Google runoob taobao RUNoob"; var n1=str.match(/runoob/g); // 区分大小写 var n2=str.match(/runoob/gi); // 不区分大小写 //g 修饰符可以查找字符串中所有的匹配项: str="Google runoob taobao runoob"; n1=str.match(/runoob/); // 查找第一次匹配项 n2=str.match(/runoob/g); // 查找所有匹配项 //m 修饰符可以使 ^ 和 $ 匹配一段文本中每行的开始和结束位置。 str="runoobgoogle\ntaobao\nrunoobweibo"; n1=str.match(/^runoob/g); // 匹配一个 n2=str.match(/^runoob/gm); // 多行匹配 //默认情况下的圆点 . 是 匹配除换行符 \n 之外的任何字符,加上 s 之后, . 中包含换行符 \n。 str="google\nrunoob\ntaobao"; n1=str.match(/google./); // 没有使用 s,无法匹配\n n2=str.match(/runoob./s); // 使用 s,匹配\n //RegExp对象 var str = "amy like pink"; var reg = /pink/; var result1 = reg.test(str); // true var result2 = reg.exec(str); // pink //String对象 var str = "amy like pink"; var reg = /pink/; var result1 = str.match(reg); // pink var result2 = str.search(reg); // 9 var result3 = str.replace(reg, "red"); // amy like red var str1 = "red,pink,blue,white"; var result4 = str1.split(',', 2); // [ "red", "pink" ] ``` ### 正则表达式的应用 #### 常见的正则表达式 ```javascript // 身份证号, 支持1/2代(15位/18位数字) let reg_id = /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/; // 中国手机号(严谨), 根据工信部2019年最新公布的手机号段 let reg_phone = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-7|9])|(?:5[0-3|5-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1|8|9]))\d{8}$/; // 12小时制时间(hh:mm:ss) let reg_date = /^(?:1[0-2]|0?[1-9]):[0-5]\d:[0-5]\d$/; // 24小时制时间(HH:mm:ss) let reg_dates = /^(?:[01]\d|2[0-3]):[0-5]\d:[0-5]\d$/; // ip-v4 let reg_ip = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/; // ip-v6 let reg_ip6 = /^((([0-9A-Fa-f]{1,4}:){7}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){6}:[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){5}:([0-9A-Fa-f]{1,4}:)?[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){4}:([0-9A-Fa-f]{1,4}:){0,2}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){3}:([0-9A-Fa-f]{1,4}:){0,3}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){2}:([0-9A-Fa-f]{1,4}:){0,4}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){6}((\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b)\.){3}(\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b))|(([0-9A-Fa-f]{1,4}:){0,5}:((\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b)\.){3}(\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b))|(::([0-9A-Fa-f]{1,4}:){0,5}((\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b)\.){3}(\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b))|([0-9A-Fa-f]{1,4}::([0-9A-Fa-f]{1,4}:){0,5}[0-9A-Fa-f]{1,4})|(::([0-9A-Fa-f]{1,4}:){0,6}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){1,7}:))$/i; ``` #### 演示案例 ```javascript //用户名校验 function CheckUser() { var user = $("#user").val(); //获取值 var reguser = /^[a-zA-Z0-9_]{4,16}$/; //定义校验规则 var user_msg = $("#user_msg"); //提示信息元素 user_msg.html(""); //判断是否为空 if (user == "") { user_msg.html("*昵称不能为空"); return false; } else if (reguser.test(user) == false) { user_msg.html("*用户名格式不正确"); return false; } return true; } ``` ## HTML5表单验证 ### HTML5表单新增属性 **新增属性列表:** | 属性 | 描述 | | ----------- | -------------------------------------------------------------- | | placeholder | 提供一种提示(hint),输入域为空时显示,获得焦点输入内容后消失 | | required | 规定输入域不能为空 | | pattern | 规定验证输入域的模式(正则表达式) | **注意:** 使用HTML5表单验证属性结合正则表达式,是目前客户端校验中应用频次较高的一种校验方式 ![image.png](https://www.jbea.cn/usr/uploads/2022/09/3883379507.png) ### validity属性应用 **概述:** 为表单元素添加 `required`和 `pattern`属性后,可以通过 `validity`属性获取 `ValidityState`对象,以获取当前验证属性的验证状态 **语法:**`var validityState = document.getElementById("user").validity;` ValidityState对象包括 8 个属性,分别针对 8 个方面的验证错误 | 属性 | 描述 | | --------------- | --------------------------------------------------------------------------------------------- | | valueMissing | 当表单元素设置required属性后,如果表单的值为空,则无法通过表单验证,返回true;否则,返回false | | typeMismatch | 当用户输入的内容与表单类型不匹配时,返回true;否则,返回false | | patternMismatch | 当用户输入的内容与表单元素pattern特性的正则不匹配时,返回true;否则,返回false | | tooLong | 当用户输入的内容超过了表单元素maxLength特性限定的字符长度,返回true;否则,返回false | | rangeUnderflow | 当用户输入的值小于min特性的值,返回true;否则,返回false | | rangeOverflow | 当用户输入的值大于max特性的值,返回true;否则,返回false | | stepMismatch | 当用户输入的值不符合step特性所推算的规则,返回true;否则,返回false | | customError | 使用自定义的验证错误提示信息时,当存在自定义错误信息时,返回true;否则,返回false | **演示案例:** ```javascript var email = document.getElementById("email"); if (email.validity.valueMissing == true) { // 当数据值为空时 email.setCustomValidity("邮箱不能为空"); } else if (email.validity.typeMismatch == true || email.validity.patternMismatch == true) { //当表单类型不匹配或正则表达式验证错误时 email.setCustomValidity("邮箱格式不正确"); } else { email.setCustomValidity(""); } ``` 最后修改:2022 年 09 月 17 日 © 允许规范转载 赞 5 都滑到这里了,不点赞再走!?