求 jq 表单验证效果
app.fdi.gov.cn/1800000624_10000122_5.html上面是效果展示，求这个表单验证效果的代码...
app.fdi.gov.cn/1800000624_10000122_5.html
上面是 效果展示，求这个表单验证效果的 代码 展开
上面是 效果展示，求这个表单验证效果的 代码 展开
1个回答
展开全部
<!DOCTYPE html>
<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>
<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>
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
