失去焦点验证错误提示
失去焦点验证成功
以上是对字符的比较验证，其验证测试代码如下
复制代码 代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link type="text/css" href="https://www.jb51.net/new_file.css"/>
<script language="JavaScript" type="text/javascript" src="https://www.jb51.net/jquery-1.3.2.min.js"></script>
<script language="JavaScript" type="text/javascript" src="https://www.jb51.net/jquery-extend-1.0.0.js"></script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
$("#txtPass2").checkCompare({
onFocusText:"要和上面的填写一样哦",
onFocusClass:"notice",
onEmptyText:"不允许为空，你要听话点",
onEmptyClass:"error",
onErrorText:"验证错误了，请你认真填写",
onErrorClass:"error",
onSuccessText:"恭喜啊 成功了",
onSuccessClass:"correct",
comType:"==",
dataType:"text",
comId:"txtPass1",
targetId:"txtPass2Tip"
});
});
</script>
</head>
<body>
<p>
<label>密码1:</label><input type="text" value=""/><span></span>
</p>
<p>
<label>密码2:</label><input type="text" value=""/><span></span>
</p>
</body>
</html>
数字之间的验证
数字验证获得焦点提示作用
数字验证失去焦点验证失败
数字验证失去焦点验证成功
复制代码 代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link type="text/css" href="https://www.jb51.net/new_file.css"/>
<script language="JavaScript" type="text/javascript" src="https://www.jb51.net/jquery-1.3.2.min.js"></script>
<script language="JavaScript" type="text/javascript" src="https://www.jb51.net/jquery-extend-1.0.0.js"></script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
$("#txtPass2").checkCompare({
onFocusText:"结果要比前面的大",
onFocusClass:"notice",
onEmptyText:"不允许为空，你要听话点",
onEmptyClass:"error",
onErrorText:"验证错误了，请你认真填写",
onErrorClass:"error",
onSuccessText:"恭喜啊 成功了",
onSuccessClass:"correct",
comType:">",
dataType:"number",
comId:"txtPass1",
targetId:"txtPass2Tip"
});
});
</script>
</head>
<body>
<p>
<label>密码1:</label><input type="text" value=""/><span></span>
</p>
<p>
<label>密码2:</label><input type="text" value=""/><span></span>
</p>
</body>
</html>
文章内容不想做过多的解释了，此文非常简单，相对于前面几篇文章来说。表单验证扩展不断更新中，后续期待............
您可能感兴趣的文章: