jQuery 表单验证扩展代码(二)(2)

 输入文本框获得焦点提示

 输入文本框失去焦点错误提示

 输入文本验证正确提示

radio 测试样图

 

checkbox 测试样图

 checkbox 验证失败提示

 checkbox 验证成功提示
测试代码
[code]
<script language="JavaScript" src="https://www.jb51.net/jquery-1.3.2.min.js" type="text/javascript"></script>
<script language="JavaScript" src="https://www.jb51.net/jquery-extend-1.0.0.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
$("#txtName").checkRequired({
required:true,
onFocusText:"必填项",
onFocusClass:"notice",
onErrorText:"错误提示",
onErrorClass:"error",
onSuccessClass:"correct",
targetId:"txtNameTip"
});

$("#rdbMan").checkRequired({
required:true,
onFocusText:"必填项",
onFocusClass:"notice",
onErrorText:"错误提示",
onErrorClass:"error",
onSuccessClass:"correct",
targetId:"txtSexTip"
});
$("#rdbWoman").checkRequired({
required:true,
onFocusText:"必填项",
onFocusClass:"notice",
onErrorText:"错误提示",
onErrorClass:"error",
onSuccessClass:"correct",
targetId:"txtSexTip"
});



$("#rdbMan1,#rdbWoman2,#rdbMan3,#rdbWoman4").checkRequired({
required:true,
onFocusText:"必填项",
onFocusClass:"notice",
onErrorText:"错误提示",
onErrorClass:"error",
onSuccessClass:"correct",
targetId:"txthobbyTip"
});
});
</script>


<p>
<label>姓名:</label><input type="text" value=""/><span></span>
</p>

<p>
<label>性别:</label>
<span>
<input type="radio" value="男" />男 &nbsp;&nbsp;&nbsp;
<input type="radio" value="女" />女
</span>
<span></span>
</p>
<p>
<label>爱好:</label>
<span>
<input type="checkbox" value="hobby1" />aa &nbsp;&nbsp;&nbsp;
<input type="checkbox" value="hobby2" />bb&nbsp;&nbsp;&nbsp;
<input type="checkbox" value="hobby3" />aa &nbsp;&nbsp;&nbsp;
<input type="checkbox" value="hobby4" />bb&nbsp;&nbsp;&nbsp;
</span>
<span></span>
</p>

这里不多说了，文章持续更新中！有问题进一步做修改中.......

您可能感兴趣的文章: