JQuery 简单表格验证

最新推荐文章于 2025-08-07 14:42:17 发布

weixin_30726161

最新推荐文章于 2025-08-07 14:42:17 发布

阅读量66

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/icemonkey/p/10527036.html

本文介绍了一个使用HTML和jQuery实现的用户注册表单，包括用户名、密码及确认密码的输入验证。通过正则表达式检查输入格式，确保用户名为6到12位字母，密码为6到20位字符，且两次输入的密码一致。

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

<form action="{% url 'register' %}" method="post">
    用户名:<input id="user_name" type="text" name="username" placeholder="请输入用户名"><span style="color: #761c19"></span>
    <p></p>
    密 码:<input id="pwd" type="password" name="password" placeholder="请输入密码"><span style="color: #761c19"></span>
    <p></p>
    密 码:<input id="cpwd" type="password" name="password" placeholder="请再次输入密码"><span style="color: #761c19"></span>
    <p></p>
    <input type="submit" value="submit">
</form>

    <script>
$(function(){
    $('#user_name').on('blur',function(){
    var re=/^\w{6,20}$/;
    if(re.test($(this).val())===false){
        $(this).next().html("用户名必须为6-12位字母").show();
    }else{
        $(this).next().hide();
    }
    });
    $('#pwd').on('blur',function(){
        var re=/^[\w!@#$%^&*]{6,20}$/;
        if(re.test($(this).val())===false){
            $(this).next().html("密码必须是6-20位字符").show();
        }else{
            $(this).next().hide();
        }
    });
    $('#cpwd').on('blur',function(){
        if($(this).val()!=$('#pwd').val()){
            $(this).next().html("两次输入密码不一致").show();
        }else{
            $(this).next().hide();
        }
    });
    $('#email').on('blur',function(){
        var re=/^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i;
        if(re.test($(this).val())==false){
            $(this).next().html("邮箱格式有误").show();
        }else{
            $(this).next().hide();
        }
    })
})

    </script>