求jq 表单验证效果
发布网友
发布时间：2022-12-21 13:11
共1个回答
热心网友
时间：2023-10-21 06:56
<html>
<head>
<title>Char 5.1.6</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
//给必须项目添加标志
$("form :input.required").each(function() {
var $required = $("<strong class='high'>*</strong>");
$(this).parent().append($required);
});
//判断用户名是否正确
$('form :input').blur(function(event) {
var $parent=$(this).parent();
//当发现原本有文本时，就删掉，增加新的
$parent.find('.formtips').remove();
if($(this).is('#username')){
if(this.value ==''||this.value.length<6){
var errorMsg='请输入至少6位的用户名';
$parent.append('<span class="formtips onError">'+errorMsg+'</span>');
}else{
var okMsg='输入正确';
$parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
}
}
//判断email地址是否填写正确
if ($(this).is('#email')) {
//判断的正则表达式
if (this.value==''||(this.value!=''&&!/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))) {
var errorMsg="请输入正确的email地址";
$parent.find('.formtips').remove();
$parent.append('<span calss="formtips onError">'+errorMsg+"</span>");
}else
{
var okMsg="ok";
$parent.append('<span class="formtips okMsg">'+okMsg+"</span>");
}
}
});
//按钮send的触发功能
$("#send").click(function(event) {
$("form .required:input").trigger('blur');
var numError=$("form .onError").length;
if (numError) {
return false;
}
alert("注册成功！");
});
})
</script>
</head>
<body>
<h2>注册</h2>
<form>
<div class="int">
<label>姓名：</label>
<input type="text" name="text" id="username" class="required">
</div>
<div class="int">
<label>邮箱：</label>
<input type="text" name="text" id='email' class="required">
</div>
<div class="int">
<label>个人资料：</label>
<input type="text" name="text">
</div>
<div class="submit">
<input type="button" name="btn" id="send" value="提交"/>
</div>
</form>
</body>
