您的位置：首页 > Web前端 > JQuery

jQuery实现用户注册的表单验证

2013-04-17 20:38 621 查看
<script type="text/javascript" src="../script/jquery-1.4.2.min.js"></script>

<script>

//jQuery实现用户注册的表单验证

$(function(){

//找到所有的input标签，遍历(each)它创建一个节点，当前元素的父元素添加它，所有的表单后面多了个*

$(":input.required").each(function(){

var $required=$("<strong>*</strong>");

$(this).parent().append($required);});

$(":input.required").blur(function(){

//判断一下鼠标离开谁了

if($(this).is("#username")){

$(".emailtip").remove();//删除span标签，否则会span标签内容会叠加

if(this.value==""||this.value.length<6){

var errMsg="<span class='emailtip'>用户名至少是6个字母</span>"

$(this).parent().append(errMsg);}else{

var msg="<span class='emailtip'>用户名正确</span>";

$(this).parent().append(msg);

}

}

if($(this).is("#email")){

$(".formtip").remove();

var reg=/^\w{1,}@\w+\.\w+$/;

var $email=$("#email").val();

if(!reg.test($email)){

var errMsg="<span class='formtip'>不正确</span>";

$(this).parent().append(errMsg);

}else{

var Msg="<span class='formtip'>正确</span>";

$(this).parent().append(Msg);

}

}

})

})

</script>

</head>

<body>

<form>

<div>

用户名：<input type="text" class="required" id="username"></div>

<div>

邮箱：<input type="text" class="required" id="email">

</div>

</form>

</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航