麻烦高手帮我用javascript验证完成这个表单
昵称不填写就在输入框下面显示：“昵称不能为空"，昵称的格式为汉字或字母，字数在3-12个字内，不能含特殊字符，填写错误就在输入框下面显示：”昵称的格式应为汉字或字母,字数...
昵称不填写就在输入框下面显示：“昵称不能为空"，昵称的格式为汉字或字母，字数在3-12个字内，不能含特殊字符，填写错误就在输入框下面显示：”昵称的格式应为汉字或字母,字数应在3-12个字内，不能含特殊字符“，正确之后才可以填写下一项。姓名那里不填就显示“姓名不能为空”，姓名的格式为2-20个汉字，填写字数超限的话就在输入框下面提示“你输入的字数超限，姓名应在2-20个汉字内“，填写正确之后才可以填写下一项。密码不能空，如果空着就在输入框下面提示“请输入密码”，密码的格式为字母加数字，字数在6-12个字数内，填写错误就提示“你输入的密码错误，密码格式为字母加数字，且字数应在6-12个字数内”，确认密码的那一项要跟上一项相同，如果不相同就提示"你输入的密码不一致“，通过后才可以到下一项。Email那里要填写正确的Email格式才可以通过，如果填写错误了就提示“请填写正确的Email邮箱地址“QQ的选项不能为空只能填数字，填写正确后才能通过，不填写就提示“请填写QQ号”,乱填就提示请输入正确的QQ号。姓别跟个人简介不用管，以上的项目只有全部通过后才可以提交，否则的话点注册键，页面不会跳转。
展开
2个回答
展开全部
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<style>
#form0 .inner{width: 720px;margin: 0 auto;}
#form0 .center{text-align: center;}
#form0 .rt{text-align: right;}
#form0 .tip{display: inline-block; padding-left: 10px; width: 240px;font-size: 12px;}
#form0 .tip-error{color: red;}
</style>
<script src="http://sandbox.runjs.cn/js/sandbox/jquery/jquery-1.4.4.min.js"></script>
<script src="http://sandbox.runjs.cn/uploads/rs/296/iehoqtsc/formValid.js" charset="UTF-8"></script>
</head>
<body>
<form action="#" id="form0">
<div class="inner">
<table>
<tr>
<td class="center" colspan="2">
<h3>会员注册</h3>
</td>
</tr>
<tr>
<th class="rt">登录昵称：</th>
<td><input type="text" id="name" name="name"><span class="tip">*</span></td>
</tr>
<tr>
<th class="rt">姓名：</th>
<td><input type="text" id="user_name" name="user_name"><span class="tip">*</span></td>
</tr>
<tr>
<th class="rt">密码：</th>
<td><input type="password" id="pass0" name="pass0"><span class="tip">*</span></td>
</tr>
<tr>
<th class="rt">确认密码：</th>
<td><input type="password" id="pass1" name="pass1"><span class="tip">*</span></td>
</tr>
<tr>
<th class="rt">Email：</th>
<td><input type="email" id="email" value="" name="email"><span class="tip">*</span></td>
</tr>
<tr>
<th class="rt">QQ：</th>
<td><input type="text" id="qq" name="qq"><span class="tip">*</span></td>
</tr>
<tr>
<th class="rt">性别：</th>
<td>
<input type="radio" name="sex" id="sex1" value="1"><label for="sex1">男</label>
<input type="radio" name="sex" id="sex2" value="2"><label for="sex2">女</label>
<span class="tip">*</span>
</td>
</tr>
<tr>
<th class="rt">个人简介：</th>
<td>
<textarea name="info" id="info" cols="30" rows="10" placeholder="快来介绍一下自己吧！"></textarea><span class="tip">*</span>
</td>
</tr>
<tr>
<td class="center" colspan="2">
<input type="submit" value="注册">
<input type="reset" value="重置">
</td>
</tr>
</table>
</div>
</form>
<script>
/** 应用中需要重写settings：通过识别errorInfo这个字符串是否为"" 决定验证成功与否 */
jQuery.form.settings = {
/**提示标签初始化: input{jQuery}:待处理标签, defaultTip:对应的默认提示*/
initTip:function(input,defaultTip){
input.nextAll('.tip').text(defaultTip || "");
},
/**默认的出错提示方案: input{jQuery}:待处理标签, errorInfo: 验证结果*/
validTip : function(input,errorInfo, defaultTip){
if(errorInfo){
for(var i=0; i<10; i+=2)input.animate({marginLeft:10-i,marginRight:i-10},20).animate({marginLeft:0,marginRight:0},20);
input.nextAll('.tip').removeClass('tip-default').addClass("tip-error").text(errorInfo);
}else{
input.nextAll('.tip').removeClass('tip-error').addClass("tip-default").text(defaultTip || "");
}
}
};
jQuery.form.render({
"#name":{
requiredTip: "昵称不能为空！",
regexp:/^[\w\d\u4e00-\u9fa5]{3,12}$/,
errorTip:"昵称的格式为汉字或字母，字数在3-12个字内"
},
"#user_name":{
regexp:/^[\u4e00-\u9fa5]{2-20}$/,
errorTip:"姓名应在2-20个汉字内"
},
"#pass0,#pass1":{
requiredTip:"请输入密码",
regexp:/^[\w\d]{6,12}$/,
errorTip:"你输入的密码错误，密码格式为字母加数字，且字数应在6-12个字数内",
validFun:function(){
var same = $("#pass0").val() == $("#pass1").val();
if(same){
$("#pass0,#pass1").nextAll(".tip").html("");
}
return { errorInfo:same?"":"你输入的密码不一致" };
}
},
"#email":{
type:"email",
errorTip:"请填写正确的Email邮箱地址"
},
"#qq":{
regexp:/^[\d]{6,12}$/,
errorTip:"请输入正确的QQ号",
requiredTip:"请填写QQ号"
}
},{
required: true,
option:"blur"
});
jQuery("#form0").submit(function(){
return jQuery(this).formValid();
});
</script>
</body>
</html>
追问
高手，刚试了下，姓名那项出错了，输入什么都不能通过，麻烦你再帮我改改行吗？
追答
额，手误，写错了。 相对的 regexp:/^[\u4e00-\u9fa5]{2-20}$/, 改成：regexp:/^[\u4e00-\u9fa5]{2,20}$/,
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
