表单验证 痛定思痛。 2022-05-19 06:35 309阅读 0赞 代码虽然有重复,但是重要的是思想和正则表达式的用 ---------- <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8"> <title>表单验证</title> <style type="text/css"> input[type=text], input[type=password] { width: 150px; height: 15px; } </style> <script type="text/javascript"> /** *账户验证方法 * */ function usernameCheck(){ var text = trim(document.getElementById('username').value);//获取用户输入的内容 var span = document.getElementById('usernameSpan'); var guize = /^\w{6,16}$/; var msg = ""; if(!text){ msg = "帐户名必须填写"; }else if(!guize.test(text)){ msg = "账户格式不合法6-16位"; } //如果用户输入有误 错误信息要写入到span 标签内 span.innerHTML = msg; span.parentNode.parentNode.style.color = msg == ""?"black":"red"; return msg == ""; } function passwordCheck(){ var text = trim(document.getElementById('password').value);//获取用户输入的内容 var span = document.getElementById('passwordSpan'); var guize = /^\w{6,32}$/; var msg = ""; if(!text){ msg = "密码必须填写"; }else if(!guize.test(text)){ msg = "密码格式不合法"; } //如果用户输入有误 错误信息要写入到span 标签内 span.innerHTML = msg; span.parentNode.parentNode.style.color = msg == ""?"black":"red"; return msg == ""; } function confirmCheck(){ var password = document.getElementById('password').value; //获取第一次输入的密码 var confirm = document.getElementById('confirm').value; var span = document.getElementById('confirmSpan'); var msg = ""; if (password != confirm) { msg = "密码不一致"; } span.innerHTML = msg; span.parentNode.parentNode.style.color = msg == ""?"black":"red"; return msg == ""; } function emailCheck(){ var text = document.getElementById('email').value;//获取用户输入的内容 var span = document.getElementById('emailSpan'); var guize = /^([\w.-]+)\@([a-zA-Z0-9.-]+)\.([\w]{2,4})$/; var msg = ""; if(!text){ msg = "邮箱必须填写"; }else if(!guize.test(text)){ msg = "邮箱格式不合法"; } //如果用户输入有误 错误信息要写入到span 标签内 span.innerHTML = msg; span.parentNode.parentNode.style.color = msg == ""?"black":"red"; return msg == ""; } function eduCheck(){ var text = document.getElementById('edu').value;//获取用户输入的内容 var span = document.getElementById('eduSpan'); var msg = ""; if(!text){ msg = "学历必须选择"; } span.innerHTML = msg; span.parentNode.parentNode.style.color = msg == ""?"black":"red"; return msg == ""; } function genderCheck(){ var text = document.getElementsByName('gender');//获取用户输入的内容 var span = document.getElementById('genderSpan'); var msg = ""; if(!text[0].checked && !text[1].checked){ msg = "性别必须选择"; } span.innerHTML = msg; span.parentNode.parentNode.style.color = msg == ""?"black":"red"; return msg == ""; } function interestCheck(){ var text = document.getElementsByName('interest');//获取用户输入的内容 var span = document.getElementById('interestSpan'); var msg = ""; if(!text[0].checked && !text[1].checked && !text[2].checked ){ msg = "兴趣必须选择"; } span.innerHTML = msg; span.parentNode.parentNode.style.color = msg == ""?"black":"red"; return msg == ""; } function trim(str){ str = str.replace(/^\s+/,""); str = str.replace(/\s+$/,""); return str; } function checkAll(){ var fUserName = usernameCheck(); var fUserPass = passwordCheck(); var fUserConfirm = confirmCheck(); var fUserEmail = emailCheck(); var fUserEdu = eduCheck(); var fUserGender = genderCheck(); var fUserInterest = interestCheck(); return fUserName && fUserPass && fUserConfirm && fUserEmail && fUserEdu && fUserGender && fUserInterest; } </script> </head> <body> <fieldset style="width: 500px; margin: 0px auto;"> <b>注册新用户</b> <form action="success.html" method="post" onsubmit="return checkAll();"> <table align="center" width="500" cellpadding="5" > <tr> <td width="30%" align="right">账户:</td> <td> <input type="text" id="username" onblur="usernameCheck()"> <span id="usernameSpan"></span> </td> </tr> <tr> <td align="right">密码:</td> <td> <input type="password" id="password" onblur="passwordCheck()"> <span id="passwordSpan"></span><!-- 提醒错误信息 --> </td> </tr> <tr> <td align="right">确认密码:</td> <td> <input type="password" id="confirm" onblur="confirmCheck()"> <span id="confirmSpan"></span> </td> </tr> <tr> <td align="right">邮箱号:</td> <td> <input type="text" id="email" onblur="emailCheck()"> <span id="emailSpan"></span> </td> </tr> <tr> <td align="right">学历:</td> <td> <select id="edu" onchange="eduCheck()"> <option value="">-请选择学历-</option> <option value="bj">本科</option> <option value="cd">研究生</option> <option value="gz">博士</option> </select> <span id="eduSpan"></span> </td> </tr> <tr> <td align="right">性别:</td> <td> <label><input type="radio" name="gender" value="male" onclick="genderCheck()" > 男 </label> <label><input type="radio" name="gender" value="female" onclick="genderCheck()"> 女 </label> <span id="genderSpan"></span> </td> </tr> <tr> <td align="right">兴趣:</td> <td> <label><input type="checkbox" name="interest" value="somke" onclick="interestCheck()"> 吃饭 </label> <label><input type="checkbox" name="interest" value="drink" onclick="interestCheck()"> 睡觉 </label> <label><input type="checkbox" name="interest" value="tangtou" onclick="interestCheck()"> 打豆豆 </label> <span id="interestSpan"></span> </td> </tr> <tr> <td align="center" colspan="2"><input type="submit" value="注册新用户"></td> </tr> </table> </form> </fieldset> <script type="text/javascript"></script> </body> </html>
相关 js验证表单 |-- form表单 <form action="<%=path%>/search" method="post" οnsubmit="return checkAll()"> 末蓝、/ 2022年09月24日 15:29/ 0 赞/ 260 阅读
相关 表单验证 应用 一、引入 <script src="Scripts/jquery-1.7.1.min.js"></script> <script src="Scripts/jqu 朱雀/ 2022年07月24日 06:28/ 0 赞/ 442 阅读
相关 表单验证 java script验证表单时常用: "^-\[0-9\]\\[1-9\]\[0-9\]\$" //负整数 "^-?//d+$" //整 ゝ一纸荒年。/ 2022年06月13日 07:54/ 0 赞/ 273 阅读
相关 表单验证 @Min(value = 18, message = " 不得小于18 ") private Integer age; / 表单验证 / ╰+攻爆jí腚メ/ 2022年06月05日 10:15/ 0 赞/ 271 阅读
相关 表单验证 angularjs 表单验证,包含必填、手机、邮箱、ip、网址等 基于angularjs自己封装的验证插件,之前的插件在angularjs上就不能使用了,然后将之前的封 淩亂°似流年/ 2022年06月04日 10:14/ 0 赞/ 265 阅读
相关 表单验证 表单验证为了减轻服务器的压力,请求次数减少,保证用户输入符合要求。 > 常用的表单验证 > \- 日期样式 > \- 表单内容是否为空 > \- 用户名和密码 梦里梦外;/ 2022年05月24日 04:40/ 0 赞/ 277 阅读
相关 Laravel 表单验证 检查应用程序的基底控制器 (App\\Http\\Controllers\\Controller) 类你会看到这个类使用了 ValidatesRequests trait。这个 曾经终败给现在/ 2022年03月22日 10:37/ 0 赞/ 376 阅读
相关 表单验证 java script验证表单时常用: "^-\[0-9\]\\[1-9\]\[0-9\]\$" //负整数 "^-?//d+$" //整 小灰灰/ 2022年01月07日 14:35/ 0 赞/ 416 阅读
相关 Layui表单验证 1:引用layui的两个文件: 2:因为是表单验证,所以只有在表单里面才起效果,先来布局:首先,放一个最外层的盒子把所有元素包裹起来,容易布局,引用layui的一个类:‘ay Myth丶恋晨/ 2021年12月04日 07:11/ 0 赞/ 416 阅读
还没有评论,来说两句吧...