JQuery验证input
2014-04-23 11:32
78 查看
jsp中表单如下:
<form method="post" action="AddPlayer">
<div class = "one">
名称:<input type="text" name="name" id="txtName">
</div>
<div class = "one">
身高:<input type="text" name="height" id="txtHeight" >
</div>
<div class = "one">
体重:<input type="text" name="weight" id="txtWeight" >
</div>
<div class = "one">
球队:<select name="teamId">
<c:forEach items="${ teamList }" var="team">
<option value="${ team.id }">${ team.name }</option>
</c:forEach>
</select>
</div>
<br>
<input type="submit" id = "insert" value="添加球员" >
<input type="reset" value="重置">
</form>
validate.jsp如下:
$(function(){
var flag = 0;
$("#insert").click(function() {
if(flag != 3){
alert("输入错误!!!");
return false;
}
});
$("form :input").blur(function(){
$(this).parent().find(".a2").remove();
if ($(this).is("#txtName")){
if(this.value==""){
var s1 = $("<span class='a2 error'>不能为空!</span>");
$(this).parent().append(s1);
}
else{
var s1 = $("<span class='a2 righta'>正确</span>");
$(this).parent().append(s1);
flag = flag + 1;
}
}
//end
if ($(this).is("#txtHeight,#txtWeight")){
if(this.value==""){
var s1 = $("<span class='a2 error'>不能为空!</span>");
$(this).parent().append(s1);
}
else if (this.value!=""&&!/^[0-9]*$/.test(this.value) ){
var s1 = $("<span class='a2 error'>请输入数字!</span>");
$(this).parent().append(s1);
}
else{
var s1 = $("<span class='a2 righta'>正确</span>");
$(this).parent().append(s1);
flag = flag + 1;
}
}
//end
});
});
validate.css略
这样就可以实验每个input的验证了!
<form method="post" action="AddPlayer">
<div class = "one">
名称:<input type="text" name="name" id="txtName">
</div>
<div class = "one">
身高:<input type="text" name="height" id="txtHeight" >
</div>
<div class = "one">
体重:<input type="text" name="weight" id="txtWeight" >
</div>
<div class = "one">
球队:<select name="teamId">
<c:forEach items="${ teamList }" var="team">
<option value="${ team.id }">${ team.name }</option>
</c:forEach>
</select>
</div>
<br>
<input type="submit" id = "insert" value="添加球员" >
<input type="reset" value="重置">
</form>
validate.jsp如下:
$(function(){
var flag = 0;
$("#insert").click(function() {
if(flag != 3){
alert("输入错误!!!");
return false;
}
});
$("form :input").blur(function(){
$(this).parent().find(".a2").remove();
if ($(this).is("#txtName")){
if(this.value==""){
var s1 = $("<span class='a2 error'>不能为空!</span>");
$(this).parent().append(s1);
}
else{
var s1 = $("<span class='a2 righta'>正确</span>");
$(this).parent().append(s1);
flag = flag + 1;
}
}
//end
if ($(this).is("#txtHeight,#txtWeight")){
if(this.value==""){
var s1 = $("<span class='a2 error'>不能为空!</span>");
$(this).parent().append(s1);
}
else if (this.value!=""&&!/^[0-9]*$/.test(this.value) ){
var s1 = $("<span class='a2 error'>请输入数字!</span>");
$(this).parent().append(s1);
}
else{
var s1 = $("<span class='a2 righta'>正确</span>");
$(this).parent().append(s1);
flag = flag + 1;
}
}
//end
});
});
validate.css略
这样就可以实验每个input的验证了!
相关文章推荐
- Easyui笔记:jquery执行append后input的验证失效解决方案
- jquery-validate--使用由于疏忽导致的问题1(input失去焦点没有被验证,submit才验证)
- 兼容IE8以下浏览器input表单属性placeholder不能智能提示功能,以及使用jquery.validate.js表单验证插件的问题处理
- jquery 验证input输入数字和小数
- Jquery中验证InputFile选中的文件类型
- Jquery 标签智能验证
- jquery使用正则表达式验证email地址的方法
- input中验证金额数字输入带popover提示验证
- jquery.validate.js remote 数据远程验证
- jQuery formValidator表单验证插件常见问题
- jQuery.Validate验证库
- jquery验证表单插件
- jquery.tagsinput.js 实现记录checkbox勾选的顺序
- Jquery Validate 相关参数及常用的自定义验证规则
- 使用jQuery实现input数值增量和减量的方法
- 使用jQuery实现input的灰色提示信息
- jQuery validate 如何清除remote验证的缓存 (在select验证时这个bug尤为明显)
- jquery validate插件高级表单验证
- jQuery formValidator表单验证插件使用总结
- 常用的JQuery数字类型验证正则表达式