素材牛VIP会员

jQuery实时表单验证特效

 所属分类:网页特效-表单特效

 浏览:1559次  评论:0次  更新时间:2016-11-17
牛币素材VIP可免积分下载
jQuery实时表单验证特效兼容IE6
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:jquery简单表单验证,可以实现表单实时验证,代码结构简单实用。
 标签:表单验证

详细介绍

使用方法:

引入CSS样式(根据自身项目样式自行修改)

form{width: 570px;height: 300px;margin: 100px auto;}
label{width: 64px;float: left;clear: left;height: 36px;line-height: 36px;margin-top: 10px;}
input{width: 300px;height: 36px;line-height: 36px;margin-top: 10px;text-indent: 8px;font-size: 16px;font-family: "微软雅黑";border: 1px solid #ccc;float: left;}
#sub{width: 302px;height: 40px;border: 1px solid #ccc;background: #888;color: #fff;font-size: 18px;text-indent: 0;}
.spa{height: 36px;line-height: 36px;width: 204px;display: inline-block;float: left;font-size: 12px;color: #BD362F;text-indent: 10px;margin-top: 10px;}

引入jQuery库文件

<script src="js/jquery-1.12.2.min.js"></script>

JS初始化、参数配置

window.onload=function(){
    $("#username").focus()
}
/************************  失焦判断  **********************************/
$("input").blur(function(){
    $(".spa").css("color","#BD362F")
    if($(this).is("#username")){             //姓名判断
        var na=/^[\u4E00-\u9FA5]{2,4}$/
        if($("#username").val()!=""){
            if(!(na.test($("#username").val()))){
                $(".spa1").text("请输入2-4个汉字");
                $(this).css("border","1px solid #BD362F")
                return false;
            }else if(na){
                $(".spa1").text("");
                return true;
            }
        }else{
            $(".spa1").text("");
        }
    }
    if($(this).is("#userphone")){            //手机号判断
        var ph=/^1[3|5|7|8|][0-9]{9}$/
        if($("#userphone").val()!=""){
        if(!(ph.test($("#userphone").val()))){
            $(".spa2").text("请输入正确手机号");
            $(this).css("border","1px solid #BD362F")
            return false;
        }else if(ph){
            $(".spa2").text("");
            return true;
        }
        }else{
            $(".spa2").text("");
        }
    }
    
    if($(this).is("#useraddress")){            //地址判断
        var ad=/^(?=.*?[\u4E00-\u9FA5])[\dA-Za-z\u4E00-\u9FA5]{8,32}/;
        if($("#useraddress").val()!=""){
        if(!(ad.test($("#useraddress").val()))){
            $(".spa3").text("请输入正确地址");
            $(this).css("border","1px solid #BD362F")
            return false;
        }else if(ad){
            $(".spa3").text("");
            return true;
        }
        }else{
            $(".spa3").text("");
        }
    }
})
/********************** 聚焦提示 ************************/	
$("input").focus(function(){
    if($(this).is("#username")){
        $(".spa1").text("2-4个汉字").css("color","#aaa")
        $(this).css("border","1px solid #aaa")
    }
    if($(this).is("#userphone")){
        $(".spa2").text("11位手机号码").css("color","#aaa")
        $(this).css("border","1px solid #aaa")
    }
    if($(this).is("#useraddress")){
        $(".spa3").text("最少8个字符(汉字、字母和数字)").css("color","#aaa")
        $(this).css("border","1px solid #aaa")
    }
})
/*********************** 提交验证 ***************************/
$("#sub").click(function(){
    var na=/^[\u4E00-\u9FA5]{2,4}$/;   //姓名正则
    var ph=/^1[3|5|7|8|][0-9]{9}$/;    //手机号正则
    var ad=/^(?=.*?[\u4E00-\u9FA5])[\dA-Za-z\u4E00-\u9FA5]{8,32}/;     //地址正则
    if(na.test($("#username").val())&&ph.test($("#userphone").val())&&ad.test($("#useraddress").val())){
        return true;
    }else{
        if($("#username").val()==""){
            $(".spa1").text('请你填写用户名')
        } 
        if($("#userphone").val()==""){
            $(".spa2").text('请你填写手机号')
        } 
        if($("#useraddress").val()==""){
            $(".spa3").text('请你填写地址')
        }
        return false;
    }
})

HTML结构

<form action="" method="post">
    <label id="name">姓&nbsp;名:</label><input type="text" name="username" id="username" value="" placeholder="请输入姓名" /><span class="spa spa1"></span><br />
    <label id="phone">手机号:</label><input type="text" name="userphone" id="userphone" value="" placeholder="请输入手机号" /><span class="spa spa2"></span><br />
    <label id="address">地&nbsp;址:</label><input type="text" name="useraddress" id="useraddress" value="" placeholder="请输入地址" /><span class="spa spa3"></span><br />
    <label>&nbsp;&nbsp;&nbsp;&nbsp;</label><input type="submit" value="注册" id="sub" />
</form>

讨论这个素材(0)回答他人问题或分享使用心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:1 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)