目錄

? ?要求：

靜態效果圖：

?HTML代碼：

CSS代碼：

JS代碼：

---

? ?要求：

?
????????1.表單元素是為空
????????2.用戶名和密碼符合要求（用戶名包含a-z，0-9或下劃線）
????????3.email地址是否正確
????????4.身份證是否是數字
????????5.日期是否有效或日期格式是否正確

靜態效果圖：

?HTML代碼：

<div id="wrapper"><form action="#" method="GET"><label>名字:</label><input type="text" id="uname"><span id="unameinfo"></span><br><label>姓氏:</label><input type="text" id="xing"><span id="xinginfo"></span><br><label>登錄名:</label><input type="text" id="nickname" ><span id="nicknameinfo"></span><br><label>密碼:</label><input type="text" id="pwd"><span id="pwdinfo"></span><br><label>再次輸入密碼:</label><input type="text" id="repwd"><span id="repwdinfo"></span><br><label>電子郵箱:</label><input type="text" id="email"><span id="emailinfo"></span><br><label>性別:</label><input type="radio" name="sex" id="nan"><i class="iconfont icon-nan"></i>男<input type="radio" name="sex" id="nv"><i class="iconfont icon-nv"></i>女<br><label>頭像:</label><input type="file" value="選擇頭像" ><br><label>愛好:</label><input type="checkbox">運動<input type="checkbox">聊天<input type="checkbox">玩游戲<br><label>出生日期:</label><input type="text" id="year" style="width: 50px;">年<input type="number" id="month">月<input type="text" id="days" style="width: 50px;">日<span id="dateinfo"></span><br><div class="btn"><input type="submit" value="提交" class="sub"><input type="reset" value="重填" class="res"></div></form></div>

CSS代碼：

*{padding: 0;margin: 0; } #wrapper{width: 600px;margin: 0 auto;padding: 30px 0px;border: 1px solid black;background-image:linear-gradient(#F6F0D3,#FFFFFF) ; } #wrapper form {margin-left: 80px; } #wrapper form label{display: inline-block;width: 100px;text-align: right; } #wrapper input{margin-bottom: 20px;margin-right: 5px; } #wrapper input[type="text"]{width: 150px;height: 18px; } #month{width: 50px; } #wrapper span{display: inline-block;color: red;font-size: 14px;margin-left: 15px; } .btn{display: flex;justify-content: left; } .sub,.res{width: 80px;height: 40px;border-radius: 5px;font-size: 18px;background-color: #FED2AD;border: none; } .sub{margin-left: 90px; } .iconfont{font-size: 24px; }

JS代碼：

//名字輸入框和提示框 var _uname = document.querySelector("#uname"); var _unameinfo =document.querySelector("#unameinfo"); //姓氏輸入框和提示框 var _xing = document.querySelector("#xing"); var _xinginfo =document.querySelector("#xinginfo"); //登錄名輸入框和提示框 var _nickname = document.querySelector("#nickname"); var _nicknameinfo = document.querySelector("#nicknameinfo"); //密碼輸入框和提示框 var _pwd = document.querySelector("#pwd"); var _pwdinfo =document.querySelector("#pwdinfo"); //再次密碼輸入框和提示框 var _repwd = document.querySelector("#repwd"); var _repwdinfo =document.querySelector("#repwdinfo"); //郵箱輸入框和提示框 var _email = document.querySelector("#email"); var _emailinfo =document.querySelector("#emailinfo"); //年月日輸入框和提示框 var _year = document.querySelector("#year"); var _month = document.querySelector("#month"); var _days = document.querySelector("#days"); var _dateinfo = document.querySelector("#dateinfo"); //正則表達式判斷登錄名 function isValid(str) { return /^\w+$/.test(str); } var _form = document.querySelector("form");_form.onsubmit =function(){if(!checkUname()){alert("請檢查郵箱");return false;}if(!checkXing()){alert("請檢查姓氏");return false;}if(!checkNickname()){alert("請檢查登錄名");return false;}if(!checkPwd()){alert("請檢查密碼");return false;}if(!checkRepwd()){alert("請檢查密碼");return false;}if(!checkEmail()){alert("請檢查郵箱");return false;}if(!checkYear()){alert("請檢查年份");return false;}if(!checkMonth()){alert("請檢查月份");return false;}if(!checkDays()){alert("請檢查日天");return false;}return true;}//名字驗證__uname.onblur = function(){checkUname();}function checkUname(){var isNumber=true; //默認不含數字_unameinfo.innerHTML = "";var uname = _uname.value;if(uname == "" ||uname ==undefined){_unameinfo.innerHTML = "名字不能為空";return false;}for (var i = 0; i < uname.length; i++) {var cha=uname.charAt(i);//如果是數字，返回falseif(!isNaN(cha)){isNumber=false;break;}}if(!isNumber){_unameinfo.innerHTML="名字不能含有數字";return false;}return true;}//姓氏驗證_xing.onblur = function(){checkXing();}function checkXing(){var isnumber=true; //默認不含數字_xinginfo.innerHTML = "";var xing = _xing.value;if(xing == "" || xing ==undefined){_xinginfo.innerHTML = "姓氏不能為空";return false;}for (var i = 0; i < xing.length; i++) {var ch=xing.charAt(i);//如果是數字，返回falseif(!isNaN(ch)){isnumber=false;break;}}if(!isnumber){_xinginfo.innerHTML="姓氏不能含有數字";return false;}return true;}//登錄名驗證_nickname.onblur = function(){checkNickname();}function checkNickname(){_nicknameinfo.innerHTML = "";var nickname = _nickname.value;if(nickname=="" || nickname==undefined){_nicknameinfo.innerHTML = "輸入不能為空";return false;}if(!isValid(nickname)){_nicknameinfo.innerHTML = "輸入的字符只能是字母數字下劃線";return false;}return true;}//密碼驗證var pwd;_pwd.onblur = function(){checkPwd();}function checkPwd(){_pwdinfo.innerHTML = "";pwd = _pwd.value;if(pwd==""|| pwd==undefined){_pwdinfo.innerHTML="密碼不能為空";return false;}if(pwd.length<6){_pwdinfo.innerHTML = "密碼不得小于六位";return false;}return true;}//再次密碼驗證_repwd.onblur= function(){checkRepwd();}function checkRepwd(){_repwdinfo.innerHTML="";var repwd=_repwd.value;if(repwd==""|| repwd==undefined){_repwdinfo.innerHTML="密碼不能為空";return false;}if(repwd!=pwd){_repwdinfo.innerHTML="兩次密碼不一致";return false;}return true;}//電子郵箱驗證_email.onblur = function(){checkEmail();}function checkEmail(){var email = _email.value;_emailinfo.innerHTML = "";if(email =="" || email==undefined){_emailinfo.innerHTML = "郵箱不能為空";return false;}if(!email.includes("@")){_emailinfo.innerHTML="郵箱需要包含@";return false;}if(!email.includes(".")){_emailinfo.innerHTML="郵箱需要包含.";return false;}if(email.indexof("@")>email.indexof(".")){_emailinfo.innerHTML="@必須在.前";return false;}return true;}//年份驗證_year.onblur = function(){checkYear();}function checkYear(){_dateinfo.innerHTML = "";var year = _year.value;if(year =="" || year ==undefined){_dateinfo.innerHTML = "年份不能為空";return false;}return true;}//月份驗證var month;_month.onblur = function(){checkMonth();}function checkMonth(){_dateinfo.innerHTML = "";month = _month.value;if(month =="" || month ==undefined){_dateinfo.innerHTML = "月份不能為空";return false;}if(month>12 || month<1){_dateinfo.innerHTML = "月份在1-12之間";return false;}return true;}//日驗證var days_days.onblur = function(){checkDays();}function checkDays(){_dateinfo.innerHTML = "";days = _days.value;if(isNaN(days)){_dateinfo.innerHTML = "請輸入準確的數值";return false;}if(days =="" || days ==undefined){_dateinfo.innerHTML = "日不能為空";return false;}if(days>31 || days<1){_dateinfo.innerHTML = "日在1-31之間";return false;}return true;}

總結

以上是生活随笔為你收集整理的JS表单验证，最详细步骤，代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。