jquery 实现表单验证功能代码(简洁)

日期：2020-06-12 栏目：程序人生浏览：次

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>表单验证页面</title>
<link href="https://www.jb51.net/Scripts/themes/default/easyui.css" type="text/css" />
<script src="https://www.jb51.net/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="https://www.jb51.net/Scripts/jquery.easyui.min.js" type="text/javascript"></script>
<script src="https://www.jb51.net/Scripts/validator.js" type="text/javascript"></script>
<script src="https://www.jb51.net/Scripts/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//加载验证信息
$('#uiform input').each(function () {
if ($(this).attr('required') || $(this).attr('validType'))
$(this).validatebox();
})
$('#ajax_test2').click(function () {
$.ajax({
url: "../Handler1.ashx?Menthod=Login",
type: 'post',
data: {name:"123456"},
timeout: 30000,
beforeSend: function (XMLHttpRequest) {
//alert('远程调用开始...');
$("#loading").html("<img src='https://www.jb51.net/Scripts/loader.gif' />");
},
success: function (data, textStatus) {
alert('开始回调，状态文本值：' + textStatus + ' 返回数据：' + data);
$("#loading").empty();
},
complete: function (XMLHttpRequest, textStatus) {
alert('远程调用成功，状态文本值：'+textStatus);
$("#loading").empty();
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert('error...状态文本值：' + textStatus + " 异常信息：" + errorThrown);
$("#loading").empty();
}
});
});
$("#btn").click(function () {
var flag = true;
flag = $("#uiform").form("validate");
// $('#uiform input').each(function () {
// if ($(this).attr('required') || $(this).attr('validType')) {
// if (!$(this).validatebox('isValid')) {
// flag = false;
// return;
// }
// }
// })
if (flag) {
$("#uiform").form("destroy");
alert('验证通过！');
}
});
});
</script>
<style type="text/css">
#name
{
width: 191px;
}
.style4
{
width: 100px;
}
.style5
{
width: 98px;
}
#txtPassword
{
width: 150px;
}
.style7
{
width: 371px;
}
.style8
{
width: 420px;
}
#btn
{
width: 86px;
}
.style9
{
width: 100px;
height: 26px;
}
.style10
{
width: 371px;
height: 26px;
}
.style11
{
width: 98px;
height: 26px;
}
.style12
{
width: 420px;
height: 26px;
}
.style13
{
width: 100px;
height: 25px;
}
.style14
{
width: 371px;
height: 25px;
}
.style15
{
width: 98px;
height: 25px;
}
.style16
{
width: 420px;
height: 25px;
}
</style>
</head>
<body >
<form title="表单验证页面">
 <br />
<table >
<tr>
<td>登录名：</td>
<td><input required="true" type="text" validType="account[4,20]" /></td>
<td>真实姓名：</td><td><input validType="CHS" required="true" type="text" /></td>
</tr>
<tr>
<td>登录密码：</td>
<td><input validType="password" required="true" type="password" /></td>
<td>Email：</td>
<td><input validType="email" type="text" /></td>
</tr>
<tr>
<td>身份证号：</td><td><input validType="idcard" type="text" /></td>
<td>QQ：</td>
<td><input validType="QQ" type="text" /></td>
</tr>
<tr>
<td>手机：</td><td><input validType="mobile" type="text" /></td>
<td>电话：</td><td><input validType="phone" type="text" /></td>
</tr>
<tr>
<td>邮编：</td><td><input validType="ZIP"
id="txtZIP" type="text" /></td>
<td>年龄：</td><td>
<input validType="number"
id="txtZIP0" type="text" /></td>
</tr>
<tr>
<td>备注：</td><td colspan="3"> </textarea>
<input type="text" required="true" validType="minLength[50]"
style="width:41%; height: 74px;"></td>
</tr>
<tr>
<td> </td><td colspan="3"><input type="checkbox" /><label>超级管理员</label>  <input type="checkbox" /><label>禁用</label></td>
</tr>
<tr>
<td>text</td><td colspan="3">
<input type="text"
missingMessage="当文本框是空时出现的提示文字。" invalidMessage="当文本框的内容无效时出现的提示文字" required="true" validType="minLength[5]" /></td>
</tr>
<tr>
<td>文本框比对：</td><td colspan="3">
<input type="password" required="true" validType="password" /> 2<input type="password" required="true" validType="equalTo['#txtpasswd']" /> </td>
</tr>
</table>
<hr />
               
<center> <input type="button" value="submit" /> 
<input type="button" value="ajax_test2" /></center>
<div></div>
</form>
</body>
</html>

转载注明出处：https://www.heiqu.com/wdjyfx.html

jquery 实现表单验证功能代码(简洁)

相关推荐