JQuery 简单表格验证

<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>