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

html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>表单验证页面</title>
<link href="../Scripts/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery.easyui.min.js" type="text/javascript"></script>
<script src="../Scripts/validator.js" type="text/javascript"></script>
<script src="../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='../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 id="uiform" title="表单验证页面" class="easyui-window">
<br />
<table >
<tr>
<td class="style9">登录名：</td>
<td class="style10"><input required="true" id="txtUsername" type="text" class="txt03" validType="account[4,20]" /></td>
<td class="style11">真实姓名：</td><td class="style12"><input id="txtTruename" validType="CHS" required="true" type="text" class="txt03" /></td>
</tr>
<tr>
<td class="style13">登录密码：</td>
<td class="style14"><input validType="password" required="true" id="txtPassword" name="password" type="password" class="txt03" /></td>
<td class="style15">Email：</td>
<td class="style16"><input id="txtEmail" name="email" validType="email" type="text" class="txt03" /></td>
</tr>
<tr>
<td class="style4">身份证号：</td><td class="style7"><input validType="idcard" id="txtIdcard" name="idcard" type="text" class="txt03" /></td>
<td class="style5">QQ：</td>
<td class="style8"><input validType="QQ" id="txtQq" name="qq" type="text" class="txt03" /></td>
</tr>
<tr>
<td class="style4">手机：</td><td class="style7"><input validType="mobile" id="txtMobile" name="mobile" type="text" class="txt03" /></td>
<td class="style5">电话：</td><td class="style8"><input id="txtTel" validType="phone" name="tel" type="text" class="txt03" /></td>
</tr>
<tr>
<td class="style4">邮编：</td><td class="style7"><input validType="ZIP"
id="txtZIP" name="txtZIP" type="text" class="txt03" /></td>
<td class="style5">年龄：</td><td class="style8">
<input validType="number"
id="txtZIP0" name="txtZIP0" type="text" class="txt03" /></td>
</tr>
<tr>
<td class="style4">备注：</td><td colspan="3"> </textarea>
<input type="text" class="easyui-validatebox" required="true" validType="minLength[50]"
style="width:41%; height: 74px;" class="txt03" id="txtRemark"></td>
</tr>
<tr>
<td class="style4"> </td><td colspan="3"><input id="Checkbox1" type="checkbox" /><label>超级管理员</label> <input id="Checkbox2" type="checkbox" /><label>禁用</label></td>
</tr>
<tr>
<td class="style4">text</td><td colspan="3">
<input id="name" type="text" class="easyui-validatebox"
missingMessage="当文本框是空时出现的提示文字。" invalidMessage="当文本框的内容无效时出现的提示文字" required="true" validType="minLength[5]" /></td>
</tr>
<tr>
<td class="style4">文本框比对：</td><td colspan="3">
<input type="password" id="txtpasswd" class="easyui-validatebox" required="true" validType="password" /> 2<input type="password" id="txtpasswd2" class="easyui-validatebox" required="true" validType="equalTo['#txtpasswd']" /> </td>
</tr>
</table>
<hr />

详细出处参考：http://www.jb51.net/article/30714.htm

转载于:https://www.cnblogs.com/fangxiandi/archive/2012/07/13/2590949.html

jquery 实现表单验证功能代码(简洁)相关推荐

jQuery实现表单验证
1.基于html表单,利用jQuery实现表单验证功能. 2.html基本结构和样式: 3.html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
html中表单的校验的插件,功能强大的jquery.validate表单验证插件
本文实例为大家分享了jquery.validate表单验证的使用方法,供大家参考,具体内容如下 1 .表单验证的准备工作在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助 ...
CSS骚操作之表单验证功能的实现代码
CSS骚操作之表单验证功能的实现代码效果图如下: 原理: 表单元素中,有一个pattern属性,可以自定义正则表达式(如手机号.邮箱.身份证-):valid伪类,可以匹配通过pattern验证的元 ...
jquery validate表单验证插件
1 表单验证的准备工作在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
JQuery实现表单验证(注册页面)
注册页面功能实现: 验证会员名密码不能为空或者包含空格,并且保证长度至少6位验证邮箱符合规则,并且不能为空重复密码要与密码一致 1.页面的样式 <form action="#&qu ...
jQuery Validate表单验证框架详解
jQuery表单验证框架总结 jQuery Validate验证框架详解 jQuery校验官网地址:bassistance.de » jQuery plugin: Validation 一.导入js库 ...
[Joomla] 利用joomla内置的表单验证功能
Joomla有自己的表单验证功能,可以很方便地实现验证,没有通过验证的输入框在提交报错后会用红色边框表示,很清楚地知道漏了那几项没填. 以下说一下使用方法: 在要使用表单功能的页面的最上面输入如下代码 ...
基于jQuery的表单验证插件：jValidate
网上基于jQuery的表单验证插件已有很多,但是这个轮子我还是继续做一个,因为这个表单验证插件是从我以前的个人JS框架移值过来的(我已慢慢投入jQuery的怀抱),并且它的验证规则书写方式也许会让你眼 ...
jQuery的表单验证
jQuery的表单验证直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

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

jquery 实现表单验证功能代码(简洁)相关推荐

最新文章

热门文章