JS项目（设计一个包含用户名、密码、重复密码、年龄等栏目的表单，并对输入的密码和重复密码进行一致性验证和保证输入的年龄是数字进行验证）

阿勋啦

已于 2022-06-21 00:25:51 修改

阅读量840

点赞数 1

分类专栏： JavaScript

于 2022-05-21 09:29:50 首次发布

本文链接：https://blog.csdn.net/A_Xunla/article/details/124894393

版权

javascript 前端 html

JavaScript 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

JS小项目

设计一个包含用户名、密码、重复密码、年龄等栏目的表单，并对输入的密码和重复密码进行一致性验证和保证输入的年龄是数字进行验证。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>

</head>
<body>
    <form name="formWork">
        <table>
            <tr>
                <td>用户名:</td>
                <td><input type="text" placeholder="用户名长度为6-14字符" id="username" name="username" onblur="checkName(this.value)" onfocus="clearNameError()" /></td>
				<td><span id="nameError"></span></td>
            </tr>
			<tr>
			    <td>年龄:</td>
			    <td><input type="text" placeholder="年龄必须为数字" id="age" name="age" onblur="checkAge(this.value)" onfocus="clearAgeError()" /></td>
			    <td><span id="AgeError"></span></td>
			</tr>
            <tr>
                <td>密码：</td>
                <td><input type="password" placeholder="密码不能少于6个字符" id="userpswd" name="userpswd" onblur="checkUserpswd(this.value)" onfocus="clearPswdError()" /></td>
                <td><span id="pswdError"></span></td>
            </tr>
            <tr>
                <td>确认密码:</td>
                <td><input type="password" placeholder="请再输入一次" id="confirmpswd" name="confirmpswd" onblur="isSame(this.value);" onfocus="clearSameError()" /></td>
                <td><span id="confirmpswdError"></span></td>
            </tr>
            <tr>
                <td><input type="button" value="注册" onclick="checkAll();"/></td>
            </tr>
        </table>
    </form>
	
	
    <script type="text/javascript">
        String.prototype.trim = function() {
            return this.replace(/CDSN:axunla(^\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 (username.length < 6 || username.length > 14) {
                nameError.innerHTML = "<font color='red'>用户名长度6-14 </font>";
                ok = false;
            } else {
                nameError.innerHTML = " ";
                ok = true;
            }
            return ok;
        }

        function clearNameError() {
            var nameError = document.getElementById("nameError");
            nameError.innerHTML = "";
        }
		function checkAge(age){
			age = age.trim();
			var ok1 = false;
			var AgeError = document.getElementById("AgeError");
			if (isNaN(age)) {
			    AgeError.innerHTML = "<font color='red'>你输入的年龄不是数字,请重新输入</font>";
			    ok1 = false;
            } else if(age == ""){
				AgeError.innerHTML = "<font color='red'>年龄不能为空 </font>";
				ok1 = false;
			} else {
			    AgeError.innerHTML = " ";
			    ok1 = true;
			}
			return ok1;
		}
		function clearAgeError(){
			var AgeError = document.getElementById("AgeError");
			AgeError.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 < 6) {
                pswdError.innerHTML = "<font color='red'>密码不能少于6位 </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 checkAll() {
            var username = document.getElementById("username").value;
			var age = document.getElementById("age").value;
            var userpswd = document.getElementById("userpswd").value;
            if (checkName(username) && checkUserpswd(userpswd) && checkAge(age) && isSame()) {
                document.formWork.submit();
				alert("注册成功");
            }
        }
    </script>
</body>
</html>

效果图如下：

在这里插入图片描述

阿勋啦

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS项目（设计一个包含用户名、密码、重复密码、年龄等栏目的表单，并对输入的密码和重复密码进行一致性验证和保证输入的年龄是数字进行验证）

设计一个包含用户名、密码、重复密码、年龄等栏目的表单，并对输入的密码和重复密码进行一致性验证和保证输入的年龄是数字进行验证
复制链接

扫一扫