表单验证—正则表达式验证表单

最新推荐文章于 2021-09-10 21:16:47 发布

weixin_30908103

最新推荐文章于 2021-09-10 21:16:47 发布

阅读量191

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/domi22/p/8059895.html

本文介绍了一个用户注册表单的设计与实现过程，并详细解释了使用JavaScript进行表单验证的具体方法，包括用户名、密码、电子邮箱等字段的有效性检查。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、表单

<body>
<section id="register">
<div><img src="images/logo.jpg" alt="logo" /><img src="images/banner.jpg" alt="banner" /></div>
    <h1 class="hr_1">新用户注册</h1>
    <form action="register_success.htm" method="post" name="myform" id="form1">
        <dl>
            <dt>用户名：</dt>
            <dd><input id="user" type="text" /><div id="user_prompt">用户名由英文字母和数字组成的4-16位字符，以字母开头</div></dd>
        </dl>
        <dl>
            <dt>密码：</dt>
            <dd><input id="pwd" type="password"  /><div id="pwd_prompt">密码由英文字母和数字组成的4-10位字符</div></dd>
        </dl>
        <dl>
            <dt>确认密码：</dt>
            <dd><input id="repwd" type="password"/><div id="repwd_prompt"></div></dd>
        </dl>
        <dl>
            <dt>电子邮箱：</dt>
            <dd><input id="email" type="text"/><div id="email_prompt"></div></dd>
        </dl>
        <dl>
            <dt>手机号码：</dt>
            <dd><input id="mobile" type="text" /><div id="mobile_prompt"></div></dd>
        </dl>
        <dl>
            <dt>生日：</dt>
            <dd><input id="birth" type="text"/><div id="birth_prompt"></div></dd>
        </dl>
        <dl>
            <dt>&nbsp;</dt>
            <dd><input name=""  id="image" type="image" src="images/register.jpg" class="btn" /></dd>
        </dl>
  </form>
</section>
</body>

二、js校验

/**
 * Created by Administrator on 
 */
$(function () {
    var isGo=false;

    //用户名验证
    $("#user").blur(function () {
        var user = $("#user").val();
        var reg = /^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
        if(reg.test(user)){
            $("#user_prompt").text("");
            isGo=true;
        }else{
            $("#user_prompt").text("你的输入格式有误！");
            isGo=false;
        }
    });


    //验证密码1
    $("#pwd").blur(function () {
        var pwd = $("#pwd").val();
        var reg = /^[a-zA-Z0-9]{4,10}$/;
        if(reg.test(pwd)){
            $("#pwd_prompt").text("");
            isGo=true;
        }else{
            $("#pwd_prompt").text("你的输入格式有误！");
            isGo=false;
        }
    });

    //验证密码2
    $("#repwd").blur(function () {
        var pwd = $("#pwd").val();
        var repwd = $("#repwd").val();
        var reg = /^[a-zA-Z0-9]{4,10}$/;
        if(!reg.test(repwd)){
            // $("#repwd_prompt").text("");
            // isGo=true;
            $("#repwd_prompt").text("你的输入格式有误！");
            isGo=false;
        }else if(pwd!=repwd){
            $("#repwd_prompt").text("两次输入的密码不一致！");
            isGo=false;
        }else{
            $("#repwd_prompt").text("");
            isGo=true;
        }
    });

    //验证手机号码
    $("#mobile").blur(function () {
        var mobile = $("#mobile").val();
        var reg = /^[1][0-9]{10}$/;
        if(reg.test(mobile)){
            $("#mobile_prompt").text("");
            isGo=true;
        }else{
            $("#mobile_prompt").text("你的输入有误！");
            isGo=false;
        }
    });

    //验证年龄
    $("#birth").blur(function () {
        var birth = $("#birth").val();
        var reg = /^(?:19\d{2}|200\d)-(?:1[0-2]|0?[0-9])-(?:3[01]|[12][0-9]|0?[0-9])$/;
        if(reg.test(birth)){
            $("#birth_prompt").text("");
            isGo=true;
        }else{
            $("#birth_prompt").text("你的输入有误！");
            isGo=false;
        }
    });


 function check() {
     return isGo;
 }

$("#image").click(function () {
    $("#form1").submit(check());
});

});