点击按钮后，只有通过数据校验才能提交

最新推荐文章于 2023-06-19 13:56:43 发布

aigo-2021

最新推荐文章于 2023-06-19 13:56:43 发布

阅读量867

点赞数 1

分类专栏： javaWeb 文章标签： JavaScript 正则 HTML

本文链接：https://blog.csdn.net/aigo_2021/article/details/124394642

版权

javaWeb 专栏收录该内容

33 篇文章 4 订阅

订阅专栏

该博客详细介绍了如何使用HTML、JavaScript和正则表达式实现一个注册表单的验证，包括用户名、邮箱、城市联动下拉列表和密码确认等输入限制。用户必须填写包含至少8个字符且包含字母和数字的用户名，选择城市，输入符合邮箱格式的电子邮件，以及两次输入相同的密码。此外，还实现了省份和城市联动下拉列表的功能。

摘要由CSDN通过智能技术生成

完成以下界面，点击按钮后，只有通过数据校验才能提交

（使用正则表达式进行输入框格式限制，邮箱格式限制，实现联动下拉列表）
其中
1.用户名长度不小于8，必须包括字母，数字；
2.城市为联动下拉列表
3.电子邮件必须符合邮箱格式
4.所有*为必填项
5.两次密码必须相同

示例：

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>注册信息</title>
    <script>
        var provinces=["黑龙江省","山东省","辽宁省"];
        var citys=[["双鸭山市","哈尔滨市","绥化市","黑河市"],
		["济南市","青岛市","烟台市"],
		["沈阳市","大连市","抚顺市","鞍山"]];
        window.onload=function (){
            //省份城市下拉列表事件
            //省份下拉列表事件
            var p=document.getElementById("province");
            p[0]=new Option("---省---","-1");
            for(var i=0;i<provinces.length;i++){
                p[i+1]=new Option(provinces[i],i);
            }
            //城市下拉列表事件
            p.onchange=function (){
                var v=p.value;
                var c=document.getElementById("city");
                c.length=0;
                c[0]=new Option("---市---","-1");
                for(var j=0;j<citys[v].length;j++){
                    c[j+1]=new Option(citys[v][j],j);
                }
            }
            //提示问题下拉列表事件
            var questions=["你初中同桌的名字","你的爱好","你最喜欢的宠物"];
            var q=document.getElementById("question");
            q[0]=new Option("--请选择--","-1");
            for (var i=0;i<questions.length;i++){
                q[i+1]=new Option(questions[i],i);
            }

            var btn_u=document.getElementById("username");
            var btn_email=document.getElementById("email");
            var btn_passwordagine=document.getElementById("password_agine");
            //用户名输入限制
            btn_u.onchange=function (){
                var usn=document.getElementById("username").value;
                var exp=new RegExp("^\\w{8,}$");//用户名长度不小于8位
				if(usn==""){
					alert("用户名不能为空");
					return;
				}
				if(exp.test(usn)){
                    alert("你的用户名成功输入");
                }else{
                    alert("用户名格式不正确");
                }
            }
            //邮箱输入限制
            btn_email.onchange=function(){
                var ema=document.getElementById("email").value;
                var expemail=new RegExp("^([a-zA-Z]|[0-9])(\\w|\\-)+@[a-zA-Z0-9]+\\.([a-zA-Z]{2,4})$");
                if (expemail.test(ema)){
                    alert("邮箱成功输入");
                }else{
                    alert("邮箱格式不正确");
                }
            }
            //密码设置两次必须相同限制
            btn_passwordagine.onchange=function (){
                var pasag=document.getElementById("password_agine").value;
                var pas=document.getElementById("password").value;
				if(pas==""){
					alert("密码不能为空");
					return;
				}
                if (pas==pasag){
                    alert("密码设置成功");
                }else{
                    alert("第二次密码与第一次不符");
                }
            }
        }
		
    </script>
</head>

<body>
<form >
	<table>
		<tr height="60">
			<td align="right">您想要的用户名：<font color="red">*</font></td>
			<td>
				<input type="text" id="username" required="required">
			</td>
		</tr>
		<tr>
			<td align="right">您的性别：<font color="red">*</font></td>
			<td><input type="radio" name="sex" value="1" checked>男<input type="radio" name="sex" value="2">女</td>
		</tr>
		<tr height="60">
			<td align="right">您来自：<font color="red">*</font></td>
			<td>
				<select id="province">

				</select>
				<select id="city">

				</select>
			</td>
		</tr>
		<tr >
			<td align="right">提示问题：<font color="red">*</font></td>
			<td>
				<select id="question">

				</select>
			</td>
		</tr>
		<tr height="60">
			<td align="right">答案：<font color="red">*</font></td>
			<td><input type="text" id="answer" required="required"></td>
		</tr>
		<tr>
			<td align="right">电子邮件地址：<font color="red">*</font></td>
			<td><input type="text" id="email"  required="required" ></td>
		</tr>
		<tr height="60">
			<td align="right">设置密码：<font color="red">*</font></td>
			<td><input type="password" id="password" required="required"></td>
		</tr>
		<tr>
			<td align="right">再次输入密码：<font color="red">*</font></td>
			<td><input type="password" id="password_agine" required="required"></td>
		</tr>
		
		<tr align="center" height="60">
			
			<td colspan="2">
				<input type="button" value="同意以上服务条款，提交注册信息" onclick="loginOnclick();">
			</td>
		</tr>
	</table>
</form>

</body>
</html>

显示效果：