DOM、js验证输入框

来源：互联网发布：淘宝正品化妆品店编辑：程序博客网时间：2024/06/06 14:18

jsp页面：

引用js：

<script type="text/javascript" src="js/calendar.js" ></script>  <script type="text/javascript" src="js/calendar-zh.js" ></script><script type="text/javascript" src="js/calendar-setup.js"></script><script language="javascript" src="js/validate.js"></script>

<span style="font-size:14px;color:#3366ff;">引用样式：</span>

<link type="text/css" rel="stylesheet" href="css/calendar.css" >

表单提交验证：

<form name="form"  action="<%= request.getContextPath() %>/RegisterServlet"  method=post onSubmit="return validate(this)"><h5><tr><td>编    号：  <input type ="text" name="id"  style="width:150px" maxlength="4" onblur="validateid(this.value)"></input><font color="red">*</font><br><br>    <span id="empid_msg"></span></td></tr><tr><td>用户名：  <input type ="text" name="userName"  style="width:150px" maxlength="12" onblur="validatename(this.value)"></input><font color="red">*</font><br><br>    <span id="ename_msg"></span></td></tr><tr><td>密    码：  <input type ="password" name="password"  style="width:150px" maxlength="16" onblur="validatepass(this.value)"></input><font color="red">*</font><br><br><span id="epass_msg"></span></td></tr><tr><td>确认密码：<input type ="password" name="repassword"  style="width:150px"maxlength="16" onblur="validaterepass()"></input><font color="red">*</font><br><br><span id="erepass_msg"></span></td></tr><tr><td>真实姓名：<input type ="text" name="realName"  style="width:150px" maxlength="6" onblur="validatereal(this.value)"></input><font color="red">*</font><br><br><span id="ereal_msg"></span></td></tr><tr><td>邮    箱：  <input type ="text" name="email"  style="width:150px" onblur="validateemail(this.value)"></input><font color="red">*</font><br><br>    <span id="empemail_msg"></span></td></tr><tr><td>性  别：  <input type ="radio" value="1" name="sex" checked="checked">男           <input type ="radio" value="2" name="sex" >女<font color="red">*</font><br><br></td></tr><tr><td>出生日期：<input type="text"  name="birth" onclick="return showCalendar('EntTime', 'y-mm-dd');"  id="EntTime" maxlength="15" onblur="validateHiredate(this.value)"></input><span id="ebirth_msg"></span></td></tr>

validate.js

function validateid(id){if(!(/\d{4}/.test(id))){document.getElementById("empid_msg").innerHTML = "<img src=\"images/wrong.gif\">" + "<font  color=\"red\">用户编号必需是4位数字！</font>" ;return false ;} else {document.getElementById("empid_msg").innerHTML = "<img src=\"images/right.gif\">"  ;return true ;}}function validatename(userName){var patrn=/^(\w){4,12}$/; if(!patrn.exec(userName)){document.getElementById("ename_msg").innerHTML = "<img src=\"images/wrong.gif\">" + "<font color=\"red\">用户名只能输入4-12个字母、数字、下划线组成！</font>" ;return false ;} else {document.getElementById("ename_msg").innerHTML = "<img src=\"images/right.gif\">" + "<font color=\"green\"></font>" ;return true ;}}function validatepass(password){var patrn=/^(\w){6,16}$/; if(!patrn.exec(password)){document.getElementById("epass_msg").innerHTML = "<img src=\"images/wrong.gif\">" + "<font color=\"red\">密码只能输入6-20个字母、数字、下划线组成！</font>" ;return false ;} else {document.getElementById("epass_msg").innerHTML = "<img src=\"images/right.gif\">" + "<font color=\"green\"></font>" ;return true ;}}function validaterepass(){var pw1=document.form.password.value;var pw2=document.form.repassword.value;if(!pw1==""){if(pw1==pw2){document.getElementById("erepass_msg").innerHTML = "<img src=\"images/right.gif\">" + "<font color=\"green\"></font>" ;return true ;} else {document.getElementById("erepass_msg").innerHTML = "<img src=\"images/wrong.gif\">" + "<font color=\"red\">两次输入密码不一致！</font>" ;return false ;}}else{return false;}}function validatereal(realName){len=realName.length;if(len>=2&&len<=6){if((/[\u4e00-\u9fa5]+/).test(realName)){document.getElementById("ereal_msg").innerHTML = "<img src=\"images/right.gif\">" + "<font color=\"green\"></font>" ;return true ;} else {document.getElementById("ereal_msg").innerHTML = "<img src=\"images/wrong.gif\">" + "<font color=\"red\">请填写中国人姓名！</font>" ;return false ;}}else{document.getElementById("ereal_msg").innerHTML = "<img src=\"images/wrong.gif\">" + "<font color=\"red\">请填写中国人姓名！</font>" ;return false;}}function validateHiredate(birth){if(birth==""){document.getElementById("ebirth_msg").innerHTML = "<img src=\"images/wrong.gif\">" + "<font color=\"red\">日期输入错误！</font>" ;return false ;} else {document.getElementById("ebirth_msg").innerHTML = "<img src=\"images/right.gif\">" + "<font color=\"green\"></font>" ;return true ;}}function validateemail(email){if(!/^\w+@\w+.\w+$/.test(email)){document.getElementById("empemail_msg").innerHTML = "<img src=\"images/wrong.gif\">" + "<font  color=\"red\">邮箱格式不正确！例xuyelong@163.com</font>" ;f.email.focus();f.email.select();return false;}else{document.getElementById("empemail_msg").innerHTML = "<img src=\"images/right.gif\">"  ;return ture;}}function validate(f){returnvalidateid(f.id.value)&& validateemail(f.email.value)&&validatename(f.userName.value)&&validatepass(f.password.value)&&validaterepass();}

引用的js和样式是日历控件，网上很多这里就不便添加。

0 0