Heim > Artikel > Web-Frontend > Implementierung der Formularvalidierung in JavaScript
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script> var names = ["tom","jack","lily","韩梅梅"]; //表单验证 function mySub(){ var userName = document.forms['myForm']['userName'].value; var pwd = document.forms['myForm']['pwd'].value; var tel = document.forms['myForm']['tel'].value; if(userName.length<3 || userName.length>6){ alert("用户名必须为3-6位"); return false; } //判断用户名是否可用,面向对象的编程思想,原则:高内聚、低耦合 var b = isName(userName); if(b){ document.getElementById("isCan").innerHTML = "用户名已存在"; return false; }else{ document.getElementById("isCan").innerHTML = ""; } //判断用户名是否重复,面向过程// for(var i=0;i<names.length;i++){// var n = names[i];// if(n == userName){// alert("用户名已存在");// return false;// }// } if(pwd.length<6){ alert("密码必须大于6位"); return false; } return true; } //判断用户名,参数为判断的用户名 function isName(str){ for(var i=0;i<names.length;i++){ if(names[i] == str){ return true; } } return false; } </script> </head> <body > <h1>用户注册</h1> <span>规则:用户名长度为3-6个字符</span> <hr /> <form name="myForm" action="a.html" method="get" onsubmit="return mySub()"> <p> 用户名:<input name="userName" type="text" /><span id="isCan" style="color: red;"></span> </p> <p> 密码:<input name="pwd" type="password" /> </p> <p> 电话:<input name="tel" type="text" /> </p> <p> <input type="submit" /> </p> </form> </body></html>
Das obige ist der detaillierte Inhalt vonImplementierung der Formularvalidierung in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!