面试题之表单验证
面试题之表单验证
-
面试的时候遇到一题,需要手撸代码进行表单验证,直接上代码。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表单验证</title> </head> <body> <!-- 表单验证 输入:姓名 输入:密码 输入:确认密码 要求: 1.两次密码不可为空且相同,并且不少于6位; 2.姓名不可为空,只能为字母、数字、或下划线; 3.使用原生js中dom对象 更多资料、面试题可以微信关注公众号 明叶师兄的学堂 进行查看 --> <form action="" method="get"> 姓名:<input type="text" id="Name" name="Name"> 密码: <input type="text" id="Secret1" name="Secret1"> 确认: <input type="text" id="Secret2" name="Secret2" class="ok"> <input type="button" id="submit" name="submit" value="提交" onclick="button_submit()"> </form> </body> <script> function button_submit() { var name = document.getElementById("Name").value; console.log(name); console.log(isName(name)); var secret1 = document.getElementsByName("Secret1")[0].value; console.log(secret1); var secret2 = document.getElementsByClassName("ok")[0].value; console.log(secret2); //输出字符串的位数 console.log(secret2.length); if(secret1 != null && secret2 != null) { if(secret1.length >= 6) { if(secret1 == secret2) { if(name != null) { if (isName(name) == true) { alert("注册成功!"); } else{ alert("姓名填写不符合规范!"); } } else { alert("姓名不可为空!"); } } else { alert("请确保两次输入的密码相同!"); } } else { alert("密码不可以小于6位!"); } } else { alert("密码不可以为空!"); } } /*校验名字格式 */ function isName(str) { var regu = "^[0-9a-zA-Z\_]+$"; var reg = new RegExp(regu); return reg.test(str); } </script> </html>
-
更多精彩内容,请关注微信关注公众号 明叶师兄的学堂