您的當(dāng)前位置：首頁如何用JavaScript做表單的校驗

如何用JavaScript做表單的校驗

來源：九壹網(wǎng)

一、原理

表單的校驗通過輸入框中添加onblur事件，輸入框失去焦點(diǎn)時調(diào)用js函數(shù)，js判斷輸入的值，操作文檔，通過innerHTML屬性把輸入框后面的提示顯示出來。

最后在form標(biāo)簽中添加onsubmit事件，點(diǎn)擊注冊按鈕時調(diào)用js函數(shù)，僅當(dāng)所有輸入框的value符合要求時，返回true,，表單提交。否則返回false表單不提交。

二、圖片

三、注意事項

js中創(chuàng)建正則表達(dá)式需要用"/^……$/”，^表示從頭開始匹配，$表示匹配到最后一個字符。例如var reg=/^\w+[@]\w+[.comn]{3,4}$/;

正則表達(dá)式的\w，表示a-z，A-Z，0-9還包括下劃線。

通常使用正則的test方法來判斷字符串是否與正則匹配，如果返回值為true，則匹配成功，返回false，匹配失敗。

四、實現(xiàn)代碼

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>使用JavaScript完成表單的校驗</title>
 <script>
 //校驗用戶名
 function checkName(){
 var name=document.getElementById("name").value;
 var nameSpan=document.getElementById("nameSpan")
 //正則表達(dá)式判斷用戶名
 var reg=/^\w+$/;
 if(name.length<1){
 nameSpan.innerHTML="<font size='1' color='red'>用戶名不能為空</font>"
 }else if(name.length<=6){
 nameSpan.innerHTML="<font size='1' color='red'>用戶名要至少六位</font>"
 }else if(!reg.test(name)){
 nameSpan.innerHTML="<font size='1' color='red'>只能由字母數(shù)字下劃線組成</font>"
 }else{
 nameSpan.innerHTML="<font size='1' color='red'>符合要求</font>"
 return true;
 }
 }
 //校驗密碼
 function checkCode(){
 var code=document.getElementById("code").value;
 var codeSpan=document.getElementById("codeSpan")
 if(code==''){
 codeSpan.innerHTML="<font size='1' color='red'>密碼不能為空</font>"
 }else if(code.length<6){
 codeSpan.innerHTML="<font size='1' color='red'>密碼至少六位</font>"
 }else{
 codeSpan.innerHTML="<font size='1' color='red'>符合要求</font>"
 return true;
 }
 }
 //校驗郵箱
 function checkEmail(){
 var email=document.getElementById("email").value;
 var emailSpan=document.getElementById("emailSpan")
 //用正則判斷郵箱格式
 var reg=/^\w+[@]\w+[.comn]{3,4}$/;
 if(email==''){
 emailSpan.innerHTML="<font size='1' color='red'>郵箱不能為空</font>"
 }else if(!reg.test(email)){
 emailSpan.innerHTML="<font size='1' color='red'>郵箱格式不正確</font>"
 }else{
 emailSpan.innerHTML="<font size='1' color='red'>符合要求</font>"
 return true;
 }
 }
 //校驗所有信息，決定表單是否提交
 function checkForm(){
 if(checkName()&&checkCode()&&checkEmail()){
 return true;
 }
 return false;
 }
 </script>
 </head>
 <body>
 <form id="regist" onsubmit="return checkForm()" action="http://www.baidu.com" method="get" style="margin-left: 520px;width: 400px;padding-left: 20px; height: 280px;border: 1px solid darkgray;">
 <h3>注冊表單</h3>
 用戶名：<input type="text" id="name" name="username" onblur="checkName()"/>
 <span id="nameSpan" ></span><br/><br />
 密碼：<input type="password" id="code" name="password" onblur="checkCode()"/>
 <span id="codeSpan"></span><br/><br />
 郵箱：<input type="text" id="email" name="email" onblur="checkEmail()"/>
 <span id="emailSpan"></span><br/><br />
 <input type="submit" value="注冊"/>
 <input type="reset" value="重置"/>
 </form>
 </body>
</html>

更多相關(guān)教程請訪問 JavaScript視頻教程

成熟丰满熟妇高潮XXXXX,人妻无码AV中文系列久久兔费 ,国产精品一国产精品,国精品午夜福利视频不卡麻豆

如何用JavaScript做表單的校驗