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

1. 页面效果,自动提示验证信息...

2. 页面代码


代码如下:

<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 />
               
<center> <input id="btn" type="button" value="submit" /> 
<input id="ajax_test2" type="button" value="ajax_test2" /></center>
<div id="loading"></div>
</form>
</body>
</html>

时间: 2012-06-30

jquery validate.js表单验证的基本用法入门

这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录. 先贴一个国内某大公司的代码: 复制代码 代码如下: <script type="text/javascript"> function lang(key) { mylang = { 'ls_input_myb': '请输入您的账户', 'ls_myb_email': '漫游币账户为邮箱地址', 'ls_login_password': '请输入您的登录密码', 'ls_password_length': '密码

jQuery 表单验证插件formValidation实现个性化错误提示

其效果图如下:使用说明 需要使用jQuery库文件和formValidation库文件[下载实例代码] http://jquery.com/ 同时需要自定义显示提示错误信息的CSS样式 使用实例 一,包含文件部分 复制代码 代码如下: <script src="jquery.js" type="text/javascript"></script> <script src="jquery.validationEngine.js&

Jquery插件easyUi表单验证提交(示例代码)

复制代码 代码如下: <form id="myForm" method="post">  <table align="center" style="width:400px;height:auto;margin-top: 20px">           <tr>                                           <td align="righ

Jquery日历插件制作简单日历

在页面开发中,经常遇到需要用户输入日期的操作.通常的做法是,提供一个文本框(text),让用户输入,然后,编写代码验证输入的数据,检测其是否是日期类型.这样比较麻烦,同时,用户输入日期的操作也不是很方便,影响用户体验.如果使用jQuery UI中的datepicker(日历)插件,这些问题都可以迎刃而解.该插件调用的<span style="color:#cc66cc;"><strong>语法格式</strong></span>如下: $

Jquery练习之表单验证实现代码

Jquery练习表单验证 复制代码 代码如下: <body> <form action="" method="post" id ="myform"> <table> <tr> <td>姓名:</td> <td><input type ="text" id = "name" name ="name"&

jquery表单验证使用插件formValidator

1.首先在项目中添加必备js与css  2.代码中添加引用(必备引用) 复制代码 代码如下: <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <!--jquery必须库--> <script src="formValidator1/formValidator-4.0.1.min.js" type=&quo

jQuery 表单验证扩展代码(一)

再次申明,插件问题比较多,后期一个个来解决,请不要恶言相向.希望各位多多提好的建议善言. 一. 分析表单验证的基本情况 在我们做web开发的过程中,会遇到各种各样的验证.归纳一下基本可以分为一下几类: (1). 是否必填项 [这个是非常基本的] (2). 输入参数中的范围校验 (3). 输入参数与另外一个控件值的比较 (4). 输入的参数正则表达式验证 二. 是否必填项验证 有如下几种情况: (1) 输入框获得焦点提示 (2)输入框失去焦点验证错误提示 (3)输入框失去焦点验证正确提示 首先确定

学习使用jQuery表单验证插件和日历插件

首先学习使用jQuery表单验证插件: 1.Jquery表单验证插件-Validation的学习与使用 (1)Validation的验证有几种规则,一是在class属性中定义验证规则,如class="required",minlength="2".为了实现将验证规则完全编写到class属性中,另外一种是通过引入新的jquery插件-jquery.metadata.js来实现验证规则的定义,此时表单的验证调用的方法改为如下所示的代码: 将$("#form&q

为开发者准备的10款最好的jQuery日历插件

这篇文章介绍的是 10 款最棒而且又很有用的 jQuery 日历插件,允许开发者们把这些漂亮的日历插件结合到自己的网站中.这些日历插件易用性都很强,轻轻松松的就可以把漂亮的日历插件装饰到你的网站了.希望下面的插件列表能给予你一定的帮助,让你的 web开发更快更好.旧版本的日历插件和下拉框已经被淘汰啦,好好欣赏 jQuery 日历插件给你带来的强烈视觉冲击吧! 1. CLNDR.js CLNDR.js 是一个日历插件,用来创建日历,允许用户随意的按照自己的想法去自定义日历.这个插件不会生成任何的标

基于Bootstrap+jQuery.validate实现Form表单验证

基于Bootstrap jQuery.validate Form表单验证实践项目结构 : github 上源码地址:https://github.com/starzou/front-end-example 1.form 表单代码[html] 复制代码 代码如下: <!DOCTYPE html>  <html>      <head>          <title>Bootstrap Form Template</title>         

jQuery Validate插件实现表单验证

jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API.所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言.更重要的是他是由jQuery 团队. jQuery UI 团队的主要开发人员Jörn Zaefferer 编写和维护的.具体我们可以访问 jQuery Validate 官网,下载

基于Bootstrap 3 JQuery及RegExp的表单验证功能

昨天小编在研究regexp,今天小编抽空给大家分享表单验证. 主要功能: 用户名必须在5-25个字符之内,而且只能使用字母.数字或下划线,否则不让通过. 密码必须在5-25个字符之内,而且只能使用字母或数字(大小写敏感),否则不让通过. 根据不同密码程度,下面的low.medium和high会改变背景颜色. 确认密码就不说啦. 验证码只是做了个样子,反正就是设成必须是5个数字. checkbox必须打勾啦,不然不让通过. 点击注册按钮,会有相应的提示框(可关闭)弹出. HTML: <body>

基于BootstrapValidator的Form表单验证(24)

Form表单进行数据验证是十分必要的,我们可以自己写JS脚本或者使用JQuery Validate 插件来实现.对于Bootstrap而言,利用BootstrapValidator来做Form表单验证是个相当不错的选择,两者完全兼容,我们也不用去关注CSS样式等美工效果. 0x01 引入BootstrapValidator 官网:BootstrapValidator,作为一个纯粹的使用者,我们可以在上面的链接处下载相关文件并引入,也可以利用CDN方式引入: <link href="//cd

jQuery Validate插件实现表单强大的验证功能

jQuery Validate插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API.所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言. 第一节:jQuery Validation让验证变得如此容易 一.官网下载jquery,和jquery validation plugin 二.引入文件 <script src="js/jquery-1.8.0.min.js" type="text/javascr

jQuery form 表单验证插件(fieldValue)校验表单

jQuery form表单验证相关知识,在做项目中经常会用到,其实也不算复杂,下面通过一段代码给大家介绍jQuery form 表单验证插件(fieldValue)校验表单的相关知识,感兴趣的朋友一起学习吧 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>jQuery form插件的使用--使用 fieldValue

jQuery实现获取form表单内容及绑定数据到form表单操作分析

本文实例讲述了jQuery实现获取form表单内容及绑定数据到form表单操作.分享给大家供大家参考,具体如下: 在日常开发的过程中,难免会用到form表单,我们需要获取表单的数据保存到数据库,或者拿到后台的一串json数据,要将数据绑定到form表单上,这里我写了一个基于jquery的,formHelp插件,使用起来也很简单: 获取表单的数据:$("#formid").serializeJson(); 绑定数据到表单:$("#formid").setForm(js

jQuery ajax提交Form表单实例(附demo源码)

本文实例讲述了jQuery ajax提交Form表单的方法.分享给大家供大家参考,具体如下: Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等. 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢. 以前的处理方法 如Form代码如下: <form id="Form1" action="action.aspx" method="post" > 名称:<input

基于javascript的Form表单验证

Form表单验证: js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等.完整代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>form-lpb</title> <style> body { back

JS组件Form表单验证神器BootstrapValidator

本文为大家分享了JS组件Form表单验证神器BootstrapValidator,供大家参考,具体内容如下 1.初级用法 来看bootstrapvalidator的描述:A jQuery form validator for Bootstrap 3.从描述中我们就可以知道它至少需要jQuery.bootstrap的支持.我们首先引入需要的js组件: <script src="~/Scripts/jquery-1.10.2.js"></script> <sc