JS项目（验证注册页面信息）

JS项目（验证注册页面信息）设计如下图所示的页面，各文本框输入信息在失去焦点时验证，如果输入有误，在文本框后面提示错误信息，各文本框输入信息的具体要求如下：(1) 用户名是由 4 ~ 16 位字符组成，不能包含数字，不能为空。加载页面时提示相应信息。(2) 密码是由 4 ~ 10 位字符组成，且不能为空，加载页面时提示相应信息。密码和确认密码必须一致。(3) 电子邮箱信息不能为空，且必须包含“@”

阿勋啦

4520人浏览 · 2022-06-02 16:33:14

阿勋啦 · 2022-06-02 16:33:14 发布

JS项目

设计如下图所示的页面，各文本框输入信息在失去焦点时验证，如果输入有误，在文本框后面提示错误信息，各文本框输入信息的具体要求如下：
(1) 用户名是由 4 ~ 16 位字符组成，不能包含数字，不能为空。加载页面时提示相应信息。
(2) 密码是由 4 ~ 10 位字符组成，且不能为空，加载页面时提示相应信息。密码和确认密
码必须一致。
(3) 电子邮箱信息不能为空，且必须包含“@”符号和“.”符号，且“@”符号不能在第 1
位，必须在“.”符号前面。
(4) 手机号不能为空，必须是 11 位数字，且由 1 开头。
(5) 出生日期不能为空，格式为 yyyy-mm-dd，年份范围在 1900~当前年，月份范围在 1~12，日范围在 1~31 之间。
(6) 全部信息均满足条件后点击注册按钮，提示注册成功。
提示：在文本框内显示默认文字使用 placeholder 属性。

代码、效果图附下：（直接复制就能用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
	<script type="text/javascript">
	    String.prototype.trim = function() {
	        return this.replace(/(^\s*)|(\s*$)/g, "");
	    }
	    function checkName(username) {
	        username = username.trim();
	        var ok = false;
	        var nameError = document.getElementById("nameError");
	        if (username == "") {
	            nameError.innerHTML = "<font color='red'>用户名不能为空 </font>";
	            ok = false;
			} else if (!isNaN(username)) {
			    nameError.innerHTML = "<font color='red'>用户名不能包含数字</font>";
			    ok = false;
	        } else if (username.length < 4 || username.length > 16) {
	            nameError.innerHTML = "<font color='red'>请输入4~16位用户名</font>";
	            ok = false;
	        } else {
	            nameError.innerHTML = " ";
	            ok = true;
	        }
	        return ok;
	    }
	
	    function clearNameError() {
	        var nameError = document.getElementById("nameError");
	        nameError.innerHTML = "";
	    }
	    function checkUserpswd(userpswd) {
	        var pswdError = document.getElementById("pswdError");
	        var ok = false;
	        if (userpswd == "") {
	            pswdError.innerHTML = "<font color='red'>密码不能为空 </font>";
	            ok = false;
	        } else if (userpswd.length < 4 || userpswd.length > 10) {
	            pswdError.innerHTML = "<font color='red'>密码长度必须在4-10之间</font>";
	            ok = false;
	        } else {
	            pswdError.innerHTML = "";
	            ok = true;
	        }
	        return ok;
	    }
	
	    function clearPswdError() {
	        var pswdError = document.getElementById("pswdError");
	        pswdError.innerHTML = "";
	    }
	
	    function isSame() {
	        var userpswd = document.getElementById("userpswd").value;
	        var confirmpswd = document.getElementById("confirmpswd").value;
	        var confirmpswdError = document.getElementById("confirmpswdError");
	        var ok = false;
	
	        if (userpswd != confirmpswd) {
	            confirmpswdError.innerHTML = "<font color='red'>密码不一致</font>";
	            ok = false;
	        } else {
	            confirmpswdError.innerHTML = "";
	            ok = true;
	        }
	        return ok;
	    }
	
	    function clearSameError() {
	        var confirmpswdError = document.getElementById("confirmpswdError");
	        confirmpswdError.innerHTML = '';
	    }
		function checkEmail(useremail){
			useremail = useremail.trim();
			var ok = false;
			var emailError = document.getElementById("emailError");
			var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
			if (useremail == "") {
			    emailError.innerHTML = "<font color='red'>电子邮箱信息不能为空</font>";
			    ok = false;
			} else if (!(reg.test(useremail))) {
			    emailError.innerHTML = "<font color='red'>输入的电子邮箱格式不对，请重新输入</font>";
			    ok = false;
			} else {
			    emailError.innerHTML = " ";
			    ok = true;
			}
			return ok;
		}
		function clearEmailError() {
		    var emailError = document.getElementById("emailError");
		    emailError.innerHTML = "";
		}
		function checkPhone(userphone){
			userphone = userphone.trim();
			var ok = false;
			var emailError = document.getElementById("phoneError");
			var reg = /^[1][0-9][0-9]{9}$/;
			if (userphone == "") {
			    phoneError.innerHTML = "<font color='red'>电话号码不能为空</font>";
			    ok = false;
			} else if (!(reg.test(userphone))) {
			    phoneError.innerHTML = "<font color='red'>输入的电话号码格式不对，请重新输入</font>";
			    ok = false;
			} else {
			    phoneError.innerHTML = " ";
			    ok = true;
			}
			return ok;
		}
		function clearPhoneError() {
		    var phoneError = document.getElementById("phoneError");
		    phoneError.innerHTML = "";
		}		
		function checkDate(userbirthdate){
			userbirthdate = userbirthdate.trim();
			var ok = false;
			var dateError = document.getElementById("dateError");
			var reg = /^((19[0-9]\d{1})|(20((0[0-9])|(2[0-2]))))\-((0?[1-9])|(1[0-2]))\-((0?[1-9])|([1-2][0-9])|30|31)$/;
			var date = new Date(userbirthdate);
			var today = new Date();
			if(userbirthdate == ""){
				dateError.innerHTML = "<font color='red'>出生日期不能为空</font>";
				ok = false;
			} else if (!(reg.test(userbirthdate))) {
			    dateError.innerHTML = "<font color='red'>输入的出生日期错误请修改</font>";
			    ok = false;
			}else if((today.getTime()-date.getTime())<0){
				dateError.innerHTML = "<font color='red'>你输入的日期超过当前日期，错误请重新输入</font>";
				ok = false;
			} else {
			    dateError.innerHTML = " ";
			    ok = true;
			}
			return ok;
		}
		function clearDateError() {
		    var dateError = document.getElementById("dateError");
		    dateError.innerHTML = "";
		}
	
	    function checkAll() {
	        var username = document.getElementById("username").value;
	        var userpswd = document.getElementById("userpswd").value;
			var useremail = document.getElementById("useremail").value;
			var userphone = document.getElementById("userphone").value;
			var userbirthdate = document.getElementById("userbirthdate").value;
	        if (checkName(username) && checkUserpswd(userpswd) && isSame() && checkEmail(useremail) && checkPhone(userphone) && checkDate(userbirthdate)) {
	            document.Myform.submit();
				alert("注册成功");
	        }
	    }
	</script>
</head>
<body>
	<h1 style="color: cornflowerblue;" >新用户注册</h2>
	<hr >
	
    <form name="Myform">
        <table>
            <tr>
                <td>用户名：</td>
                <td><input type="text" id="username" name="username" onblur="checkName(this.value)" onfocus="clearNameError()"  placeholder="由4-16位字符组成"/></td>
                <td><span id="nameError"></span></td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><input type="password" id="userpswd" name="userpswd" onblur="checkUserpswd(this.value)" onfocus="clearPswdError()" placeholder="由4-10位字符组成"/></td>
                <td><span id="pswdError"></span></td>
            </tr>
            <tr>
                <td>确认密码：</td>
                <td><input type="password" id="confirmpswd" name="confirmpswd" onblur="isSame();" onfocus="clearSameError()" /></td>
                <td><span id="confirmpswdError"></span></td>
            </tr>
				<td>电子邮箱：</td>
				<td><input type="email" id="useremail" name="useremail" onblur="checkEmail(this.value)" onfocus="clearEmailError()" placeholder="邮箱格式示例：web@126.com"/></td>
                <td><span id="emailError"></span></td>
			<tr>
			</tr>
				<td>手机号码：</td>
				<td><input type="phone" id="userphone" name="userphone" onblur="checkPhone(this.value)" onfocus="clearPhoneError()" placeholder="长度为11位且首字符必须是1"/></td>
				<td><span id="phoneError"></span></td>
			<tr>
			</tr>
				<td>出生日期：</td>
				<td><input type="birthdate" id="userbirthdate" name="userbirthdate" onblur="checkDate(this.value)" onfocus="clearDateError()" placeholder="日期输入格式：yyyy-mm-dd"/></td>
				<td><span id="dateError"></span></td>
			<tr>
                <td><input type="button" value="注册" onclick="checkAll();" /></td>
            </tr>
        </table>
    </form>
   
</body>
</html>