jQuery制作表单验证

最新推荐文章于 2022-04-29 23:10:33 发布

yyn01

最新推荐文章于 2022-04-29 23:10:33 发布

阅读量270

点赞数 1

文章标签： jquery html

用户名:

密码:

确认密码:

邮箱:

html部分

<!DOCTYPE html>

<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>表单</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/app.css">
    </head>
<body>
<form method="post" action="">
    <div class="int">
        <label for="username">用户名:</label>
        <!-- 为每个需要的元素添加required -->
        <input type="text" id="username"  class="required" placeholder="姓名" />
    </div>
    <div class="int">
        <label for="password">密   码:</label>
        <!-- 为每个需要的元素添加required -->
        <input type="password" id="password" class="required" placeholder="请输入密码"/>
    </div>
    <div class="int">
        <label for="password1">确认密码:</label>
        <!-- 为每个需要的元素添加required -->
        <input type="password" id="password1" class="required" placeholder="请输入确认密码"/>
    </div>
    <div class="int">
        <label for="email">邮  箱:</label>
        <input type="text" id="email" class="required" placeholder="请输入邮箱"/>
    </div>
    <div class="sub">
        <input type="submit" value="提交" id="send"/><input type="reset" id="res" value="重置"/>
    </div>
</form>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/style.js" charset="gb2312"></script><!--charset="gb2312"使js文件中的中文字体不再出现乱码-->
</body>
</html>

js部分

$(function(){
    //如果是必填的，则加红星标识.
    $("form :input.required").each(function(){
        var $required = $("<strong class='high'> *</strong>"); //创建元素
        $(this).parent().append($required); //然后将它追加到文档中
    });
    //文本框失去焦点后
    $('form :input').blur(function(){
        var $parent = $(this).parent();
        $parent.find(".formtips").remove();
        //验证用户名
        if( $(this).is('#username') ){
            if( this.value=="" || this.value.length < 3 ||this.value.length >20){
                var errorMsg = '用户名应该为3-20位之间';
                $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
            }else if(/[a-zA-z0-9\u4E00-\u9FA5]*/.test(this.value)){
                var errorMsg = '用户名不能包含特殊符号';
                $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
            }else{
                var okMsg = '';
                $parent.append('<span class="formtips onSuccess"></span>');
            }
        }
        //验证密码
        if($(this).is('#password')){
            if(this.value=="" || this.value.length <6 ){
                console.log(this.value);
                var errorMsg = "密码应该至少6位";
                $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
            }else if(/^[0-9]+$/.test(this.value) || /^[A-Za-z]+$/.test(this.value)){
                var okMsg = '';
                $parent.append('<span>'+okMsg+'</span>');
            }else{
                var errorMsg = "密码只能全为数字或字母";
                $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
            }
        }
        //确认密码
        if($(this).is('#password1')){
            console.log($('#password').val());
            if(this.value==""){
                var errorMsg = "密码不能为空";
                $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
            }else if(this.value != $('#password').val()){
                var errorMsg = "密码不能为空，两次密码要一致";
                $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
            }else{
                var okMsg = '';
                $parent.append('<span>'+okMsg+'</span>');
            }
        }
        //验证邮件
        if( $(this).is('#email') ){
            if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){
                var errorMsg = '请输入正确的E-Mail地址';
                $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
            }else{
                var okMsg = '';
                $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
            }
        }
    }).keyup(function(){
        $(this).triggerHandler("blur");
    }).focus(function(){
        $(this).triggerHandler("blur");
    });//end blur


    //提交，最终验证。
    $('#send').click(function(){
        $("form :input.required").trigger('blur');
        var numError = $('form .onError').length;
        if(numError){
            return false;
        }
        console.log("用户名为："+$("#username").val()+"\n"+"邮箱为："+$("#email").val());
    });

    //重置
    $('#res').click(function(){
        $(".formtips").remove();
    });
})