jQuery 表单验证插件——Validation(基础)
这个插件不错，是用jquery写的。能进行表单验证。我喜欢它的原因是因为
1.他有自带的验证规则
2.你可以自己写验证规则
3.可以通过ajax与后台交互，与后台数据比较。最后返回结果！我在表单中要验证是不是存在这个账号的时候需要与后台进行交互，使用ajax是最好不过的！
使用的方法很简单：我简单说一下“
1.写jsp页面，js文件
2.引入的这个类库，一个是juquery的类库文件，一个是validation的文件-----》http://pan.baidu.com/s/1c04nN5u
3.在jsp页面写类库链接，中引入类库，
给一个demo，我是直接在我的sshdemo中截取出来的，你理解原理就可以了
jsp页面
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!--引入struts标签 -->
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="utf-8" />
<title>AirPlane| searcPlane</title>
<!-- ================== BEGIN BASE CSS STYLE ================== -->
<link href="http://fonts.useso.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
<link href="<%=basePath %>/BacksAdmin/assets/plugins/jquery-ui/themes/base/minified/jquery-ui.min.css" rel="stylesheet" />
<link href="<%=basePath %>/BacksAdmin/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="<%=basePath %>/BacksAdmin/assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<link href="<%=basePath %>/BacksAdmin/assets/css/animate.min.css" rel="stylesheet" />
<link href="<%=basePath %>/BacksAdmin/assets/css/style.min.css" rel="stylesheet" />
<link href="<%=basePath %>/BacksAdmin/assets/css/style-responsive.min.css" rel="stylesheet" />
<link href="<%=basePath %>/BacksAdmin/assets/css/theme/default.css" rel="stylesheet" id="theme" />
<!-- ================== END BASE CSS STYLE ================== -->
<!-- ================== BEGIN PAGE LEVEL CSS STYLE ================== -->
<link href="<%=basePath %>/BacksAdmin/assets/plugins/jquery-jvectormap/jquery-jvectormap-1.2.2.css" rel="stylesheet" />
<link href="<%=basePath %>/BacksAdmin/assets/plugins/bootstrap-calendar/css/bootstrap_calendar.css" rel="stylesheet" />
<link href="<%=basePath %>/BacksAdmin/assets/plugins/gritter/css/jquery.gritter.css" rel="stylesheet" />
<link href="<%=basePath %>/BacksAdmin/assets/plugins/morris/morris.css" rel="stylesheet" />
<link href="<%=basePath %>/BacksAdmin/assets/plugins/DataTables/css/data-table.css" rel="stylesheet" />
<!-- ================== END PAGE LEVEL CSS STYLE ================== -->
<!-- ================== BEGIN BASE JS ================== --> <script src="<%=basePath %>/BacksAdmin/assets/plugins/pace/pace.min.js"></script>
<!-- END HEAD -->
<!--js框架--引入jquery，因为bootstrap使用了jquery，所以要在它前面引入-->
<script src="<%=basePath%>/resource/jquery/jquery-1.11.3.min.js"></script>
<!--css框架--引入bootstrap--> <!-- 引入自己的js/css -->
<style>
/*标签选择器*/
input[type="text"] {
width: 60%;
}
</style>
<!-- ================== END BASE JS ================== -->
</head>
<body>
<!-- begin #page-loader -->
<div id="page-loader" class="fade in">
<span class="spinner"></span>
</div>
<!-- end #page-loader -->
<!-- begin #page-container -->
<div id="page-container" class="fade page-sidebar-fixed page-header-fixed">
<!-- begin #header -->
<div id="header" class="header navbar navbar-default navbar-fixed-top">
<!-- begin container-fluid -->
<div class="container-fluid">
<!-- begin mobile sidebar expand / collapse button -->
<div class="navbar-header">
<a href="index.html" class="navbar-brand"><span class="navbar-logo"></span>Color Admin</a>
<button type="button" class="navbar-toggle" data-click="sidebar-toggled">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">
</span>
</button>
</div>
<!-- end mobile sidebar expand / collapse button -->
<!-- begin header navigation right -->
<ul class="nav navbar-nav navbar-right">
<li>
<form class="navbar-form full-width">
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter keyword" />
<button type="submit" class="btn btn-search">
<i class="fa fa-search"></i>
</button>
</div>
</form>
</li>
<li class="dropdown"><a href="javascript:;" data-toggle="dropdown" class="dropdown-toggle f-s-14">
<i class="fa fa-bell-o"></i><span class="label">5</span> </a>
<ul class="dropdown-menu media-list pull-right animated fadeInDown">
<li class="dropdown-header">Notifications (5)</li>
<li class="media"><a href="javascript:;">
<div class="media-left">
<i class="fa fa-bug media-object bg-red"></i>
</div>
<div class="media-body">
<h6 class="media-heading">
Server Error Reports</h6>
<div class="text-muted f-s-11">
3 minutes ago</div>
</div>
</a></li>
<li class="media"><a href="javascript:;">
<div class="media-left">
<img src="<%=basePath %>/BacksAdmin/assets/img/user-1.jpg" class="media-object" alt="" /></div>
<div class="media-body">
<h6 class="media-heading">
John Smith</h6>
<p>
Quisque pulvinar tellus sit amet sem scelerisque tincidunt.</p>
<div class="text-muted f-s-11">
25 minutes ago</div>
</div>
</a></li>
<li class="media"><a href="javascript:;">
<div class="media-left">
<img src="<%=basePath %>/BacksAdmin/assets/img/user-2.jpg" class="media-object" alt="" /></div>
<div class="media-body">
<h6 class="media-heading">
Olivia</h6>
<p>
Quisque pulvinar tellus sit amet sem scelerisque tincidunt.</p>
<div class="text-muted f-s-11">
35 minutes ago</div>
</div>
</a></li>
<li class="media"><a href="javascript:;">
<div class="media-left">
<i class="fa fa-plus media-object bg-green"></i>
</div>
<div class="media-body">
<h6 class="media-heading">
New User Registered</h6>
<div class="text-muted f-s-11">
1 hour ago</div>
</div>
</a></li>
<li class="media"><a href="javascript:;">
<div class="media-left">
<i class="fa fa-envelope media-object bg-blue"></i>
</div>
<div class="media-body">
<h6 class="media-heading">
New Email From John</h6>
<div class="text-muted f-s-11">
2 hour ago</div>
</div>
</a></li>
<li class="dropdown-footer text-center"><a href="javascript:;">View more</a> </li>
</ul>
</li>
<li class="dropdown navbar-user"><a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
<img src="<%=basePath %>/BacksAdmin/assets/img/user-13.jpg" alt="" />
<span class="hidden-xs">Adam Schwartz</span> <b class="caret"></b></a>
<ul class="dropdown-menu animated fadeInLeft">
<li class="arrow"></li>
<li><a href="javascript:;">Edit Profile</a></li>
<li><a href="javascript:;"><span class="badge badge-danger pull-right">2</span> Inbox</a></li>
<li><a href="javascript:;">Calendar</a></li>
<li><a href="javascript:;">Setting</a></li>
<li class="divider"></li>
<li><a href="javascript:;">Log Out</a></li>
</ul>
</li>
</ul>
<!-- end header navigation right -->
</div>
<!-- end container-fluid -->
</div>
<!-- end #header -->
<!-- begin #sidebar -->
<div id="sidebar" class="sidebar">
<!-- begin sidebar scrollbar -->
<div data-scrollbar="true" data-height="100%">
<!-- begin sidebar user -->
<ul class="nav">
<li class="nav-profile">
<div class="image">
<a href="javascript:;"><img src="assets/img/user-13.jpg" alt="" /></a>
</div>
<div class="info">
Sean Ngu
<small>Front end developer</small>
</div>
</li>
</ul>
<!-- end sidebar user -->
<!-- begin sidebar nav -->
<ul class="nav">
<li class="nav-header">导航</li>
<li class="has-sub">
<a href="javascript:;">
<b class="caret pull-right"></b>
<i class="fa fa-home"></i>
<span>首页</span>
</a>
<ul class="sub-menu"> <li class="active"><a href="<%=basePath%>/BacksAdmin/index.jsp">主控面板</a></li> </ul>
</li>
<li class="has-sub">
<a href="javascript:;">
<b class="caret pull-right"></b>
<i class="fa fa-file-o"></i>
<span>购票管理</span>
</a>
<ul class="sub-menu">
<li ><a href="<%=basePath%>/BacksAdmin/flight/chapiao.jsp">在线购票</a></li>
<li><a href="<%=basePath%>/BacksAdmin/order_approve/list.jsp">订单审核</a></li>
</ul>
</li>
<li class="has-sub">
<a href="javascript:;">
<b class="caret pull-right"></b>
<i class="fa fa-newspaper-o"></i>
<span>航空公司管理</span>
</a>
<ul class="sub-menu">
<li>
<a href="<%=basePath%>/BacksAdmin/aircompany/search.jsp">查询</a>
</li>
<li class="active">
<a href="<%=basePath%>/BacksAdmin/aircompany/add.jsp">添加</a>
</li>
</ul>
</li>
<li class="has-sub">
<a href="javascript:;">
<b class="caret pull-right"></b>
<i class="fa fa-user"></i>
<span>人员管理</span>
</a>
<ul class="sub-menu">
<li ><a href="employee!A.action">录入员工信息</a></li>
<li><a href="employee!Find.action">删除员工信息</a></li>
<li ><a href="employee!Find1.action">修改员工信息</a></li>
<li><a href="employee!Find2.action">查询员工信息</a></li>
</ul>
</li>
<li class="has-sub">
<a href="javascript:;">
<b class="caret pull-right"></b>
<i class="fa fa-calendar-o"></i>
<span>折扣管理</span>
</a>
<ul class="sub-menu">
<li ><a href="<%=basePath%>/BacksAdmin/discount/calendar1.jsp">折扣管理</a></li>
<li><a href="#">自定义添加内容</a></li>
</ul>
</li>
<li class="has-sub">
<a href="javascript:;">
<b class="caret pull-right"></b>
<i class="fa fa-paper-plane-o"></i>
<span>航班管理</span>
</a> <ul class="sub-menu">
<li ><a href="line-manager!queryLineToday.action">查询航班</a></li> </ul>
</li>
<li class="has-sub">
<a href="javascript:;">
<b class="caret pull-right"></b>
<i class="glyphicon glyphicon-plane"></i>
<span>飞机管理</span>
</a>
<ul class="sub-menu">
<li><a
href="plane!czfj.action">查询</a></li>
<li><a href="<%=basePath %>BacksAdmin/plane/add.jsp">添加</a></li>
</ul>
</li>
<li class="has-sub active">
<a href="javascript:;">
<b class="caret pull-right"></b>
<i class="fa fa-users"></i>
<span>客户管理</span>
</a>
<ul class="sub-menu">
<li ><a href="<%=basePath %>/BacksAdmin/ordermd/tuser!show.action">查询</a></li>
<li class="active"><a href="<%=basePath %>/BacksAdmin/ordermd/Tuser1.jsp">添加</a></li>
</ul>
</li>
<li class="has-sub">
<a href="javascript:;">
<b class="caret pull-right"></b>
<i class="fa fa-list-alt"></i>
<span>季度报表</span>
</a>
<ul class="sub-menu">
<li ><a href="#">自定义添加内容</a></li>
<li><a href="#">自定义添加内容</a></li>
</ul>
</li>
<li class="has-sub">
<a href="javascript:;">
<span class="badge pull-right">99</span>
<i class="fa fa-inbox"></i>
<span>邮箱</span>
</a>
<ul class="sub-menu">
<li><a href="email_inbox.html">Inbox v1</a></li>
<li><a href="email_inbox_v2.html">Inbox v2</a></li>
<li><a href="email_compose.html">Compose</a></li>
<li><a href="email_detail.html">Detail</a></li>
</ul>
</li> <!-- begin sidebar minify button -->
<li><a href="javascript:;" class="sidebar-minify-btn" data-click="sidebar-minify"><i class="fa fa-angle-double-left"></i></a></li>
<!-- end sidebar minify button -->
</ul>
<!-- end sidebar nav -->
</div>
<!-- end sidebar scrollbar -->
</div>
<div class="sidebar-bg">
</div>
<!-- end #sidebar -->
<!-- begin #content --> <div id="content" class="content">
<!-- begin breadcrumb -->
<ol class="breadcrumb pull-right">
<li><a href="javascript:;">主页</a></li>
<li><a href="javascript:;">用户管理</a></li>
<li class="active">修改或保存信息</li>
</ol>
<!-- end breadcrumb -->
<!-- begin page-header -->
<h1 class="page-header">
用户管理 <small>以下是所有可以修改的信息...</small></h1>
<!-- end page-header --> <div class="panel panel-inverse">
<div class="panel-heading">
<div class="panel-heading-btn">
<a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
<a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-repeat"></i></a>
<a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
<a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>
</div>
<h4 class="panel-title">客户管理</h4>
</div>
<div class="alert alert-info fade in">
<button type="button" class="close" data-dismiss="alert">
<span aria-hidden="true">×</span>
</button> <label class="control-label" for="input01" style="font-weight:bold">
远方，从holy airport开始
</label> </div>
<div class="panel-body"> <form class="form-horizontal" action="tuser!add.action" method=" post" id="zzw1" > <div class="control-group">
<input type="hidden" value="${tue.id}" name="tue.id"/>
<!-- Text input-->
<label class="control-label" for="input01" style="font-weight:bold">
姓名
</label>
<div class="controls">
<input type="text" placeholder="请输入姓名" class="input-xlarge form-control"
name="tue.name" value="${tue.name}" > </div>
</div> <div class="control-group"> <!-- Text input-->
<label class="control-label" for="input01" style="font-weight:bold">
身份证
</label>
<div class="controls">
<input type="text" placeholder="请输入身份证" class="input-xlarge form-control"
name="tue.idcard" value="${tue.idcard}"> </div>
</div> <div class="control-group"> <!-- Text input-->
<label class="control-label" for="input01" style="font-weight:bold">
性别
</label>
<div class="controls">
<input type="text" placeholder="请输入性别" class="input-xlarge form-control"
name="tue.sex" value="${tue.sex}"> </div>
</div> <div class="control-group"> <!-- Text input-->
<label class="control-label" for="input01" style="font-weight:bold">
联系电话
</label>
<div class="controls">
<input type="text" placeholder="请输入联系电话" class="input-xlarge form-control"
name="tue.phone" value="${tue.phone}"> </div>
</div> <div class="control-group"> <!-- Text input-->
<label class="control-label" for="input01" style="font-weight:bold">
设置账户
</label>
<div class="controls">
<input type="text" placeholder="请输入你想要设置的账户" class="input-xlarge form-control"
name="tue.account" value="${tue.account}"> </div>
</div> <div class="control-group"> <!-- Text input-->
<label class="control-label" for="input01" style="font-weight:bold">
密码
</label>
<div class="controls">
<input type="text" placeholder="请输入设置的密码" class="input-xlarge form-control"
name="tue.psw" value="${tue.psw}"> </div>
</div> <div class="control-group"> <!-- Text input-->
<label class="control-label" for="input01" style="font-weight:bold">
会员类型
</label>
<div class="controls">
<input type="text" placeholder="请输入会员类型" class="input-xlarge form-control"
name="tue.type" value="${tue.type}"> </div>
</div>
<br />
<div class="control-group"> <input type="submit" class="btn btn-info" value="保存" />
<input type="button" class="btn btn-sm btn-white"
onclick="location.href='tuser!show.action'" value="返回" /> </div> </form> </div>
</div>
</div>
</div>
<!-- end row -->
<!-- begin row --> <!-- end row -->
<!-- begin row -->
<!-- end row -->
</div>
<!-- end #content -->
<!-- begin theme-panel -->
<div class="theme-panel">
<a href="javascript:;" data-click="theme-panel-expand" class="theme-collapse-btn"><i
class="fa fa-cog"></i></a>
<div class="theme-panel-content">
<h5 class="m-t-0">
Color Theme</h5>
<ul class="theme-list clearfix">
<li class="active"><a href="javascript:;" class="bg-green" data-theme="default" data-click="theme-selector"
data-toggle="tooltip" data-trigger="hover" data-container="body" data-title="Default">
</a></li>
<li><a href="javascript:;" class="bg-red" data-theme="red" data-click="theme-selector"
data-toggle="tooltip" data-trigger="hover" data-container="body" data-title="Red">
</a></li>
<li><a href="javascript:;" class="bg-blue" data-theme="blue" data-click="theme-selector"
data-toggle="tooltip" data-trigger="hover" data-container="body" data-title="Blue">
</a></li>
<li><a href="javascript:;" class="bg-purple" data-theme="purple" data-click="theme-selector"
data-toggle="tooltip" data-trigger="hover" data-container="body" data-title="Purple">
</a></li>
<li><a href="javascript:;" class="bg-orange" data-theme="orange" data-click="theme-selector"
data-toggle="tooltip" data-trigger="hover" data-container="body" data-title="Orange">
</a></li>
<li><a href="javascript:;" class="bg-black" data-theme="black" data-click="theme-selector"
data-toggle="tooltip" data-trigger="hover" data-container="body" data-title="Black">
</a></li>
</ul>
<div class="divider">
</div>
<div class="row m-t-10">
<div class="col-md-5 control-label double-line">
Header Styling</div>
<div class="col-md-7">
<select name="header-styling" class="form-control input-sm">
<option value="1">default</option>
<option value="2">inverse</option>
</select>
</div>
</div>
<div class="row m-t-10">
<div class="col-md-5 control-label">
Header</div>
<div class="col-md-7">
<select name="header-fixed" class="form-control input-sm">
<option value="1">fixed</option>
<option value="2">default</option>
</select>
</div>
</div>
<div class="row m-t-10">
<div class="col-md-5 control-label double-line">
Sidebar Styling</div>
<div class="col-md-7">
<select name="sidebar-styling" class="form-control input-sm">
<option value="1">default</option>
<option value="2">grid</option>
</select>
</div>
</div>
<div class="row m-t-10">
<div class="col-md-5 control-label">
Sidebar</div>
<div class="col-md-7">
<select name="sidebar-fixed" class="form-control input-sm">
<option value="1">fixed</option>
<option value="2">default</option>
</select>
</div>
</div>
<div class="row m-t-10">
<div class="col-md-5 control-label double-line">
Sidebar Gradient</div>
<div class="col-md-7">
<select name="content-gradient" class="form-control input-sm">
<option value="1">disabled</option>
<option value="2">enabled</option>
</select>
</div>
</div>
<div class="row m-t-10">
<div class="col-md-5 control-label double-line">
Content Styling</div>
<div class="col-md-7">
<select name="content-styling" class="form-control input-sm">
<option value="1">default</option>
<option value="2">black</option>
</select>
</div>
</div>
<div class="row m-t-10">
<div class="col-md-12">
<a href="#" class="btn btn-inverse btn-block btn-sm" data-click="reset-local-storage">
<i class="fa fa-refresh m-r-3"></i>Reset Local Storage</a>
</div>
</div>
</div>
</div>
<!-- end theme-panel -->
<!-- begin scroll to top btn -->
<a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade"
data-click="scroll-top"><i class="fa fa-angle-up"></i></a>
<!-- end scroll to top btn -->
</div>
<!-- end page container -->
<!-- ================== BEGIN BASE JS ================== --> <script src="<%=basePath %>/BacksAdmin/assets/plugins/jquery/jquery-1.9.1.min.js"></script> <script src="<%=basePath %>/BacksAdmin/assets/plugins/jquery/jquery-migrate-1.1.0.min.js"></script> <script src="<%=basePath %>/BacksAdmin/assets/plugins/jquery-ui/ui/minified/jquery-ui.min.js"></script> <script src="<%=basePath %>/BacksAdmin/assets/plugins/bootstrap/js/bootstrap.min.js"></script> <!--[if lt IE 9]>
<script src="assets/crossbrowserjs/html5shiv.js"></script>
<script src="assets/crossbrowserjs/respond.min.js"></script>
<script src="assets/crossbrowserjs/excanvas.min.js"></script>
<![endif]--> <script src="<%=basePath %>/BacksAdmin/assets/plugins/slimscroll/jquery.slimscroll.min.js"></script> <script src="<%=basePath %>/BacksAdmin/assets/plugins/jquery-cookie/jquery.cookie.js"></script> <!-- ================== END BASE JS ================== -->
<!-- ================== BEGIN PAGE LEVEL JS ================== -->
<script src="<%=basePath %>/BacksAdmin/assets/plugins/DataTables/js/jquery.dataTables.js"></script>
<script src="<%=basePath %>/BacksAdmin/assets/plugins/morris/raphael.min.js"></script> <script src="<%=basePath %>/BacksAdmin/assets/plugins/morris/morris.js"></script> <script src="<%=basePath %>/BacksAdmin/assets/plugins/jquery-jvectormap/jquery-jvectormap-1.2.2.min.js"></script> <script src="<%=basePath %>/BacksAdmin/assets/plugins/jquery-jvectormap/jquery-jvectormap-world-merc-en.js"></script> <script src="<%=basePath %>/BacksAdmin/assets/plugins/bootstrap-calendar/js/bootstrap_calendar.min.js"></script> <script src="<%=basePath %>/BacksAdmin/assets/plugins/gritter/js/jquery.gritter.js"></script> <script src="<%=basePath %>/BacksAdmin/assets/js/dashboard-v2.min.js"></script> <script src="<%=basePath %>/BacksAdmin/assets/js/apps.min.js"></script>
<script src="<%=basePath%>/resource/foreground/js/jquery.validate.js"></script>
<script src="<%=basePath%>/BacksAdmin/ordermd/js/check1.js"></script> <!-- ================== END PAGE LEVEL JS ================== -->
<script type="text/javascript">
$(document).ready( function () { $('#table_id').DataTable({
language: {
"sProcessing": "处理中...",
"sLengthMenu": "显示 _MENU_ 项结果",
"sZeroRecords": "没有匹配结果",
"sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
"sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "任意搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
}
});
} );
</script>
<script>
$(document).ready(function() {
App.init();
DashboardV2.init();
});
</script> </body>
</html>
自己写的js文件
var validator;
$(function(){
alert(1);
var flag=0;
var location = (window.location + '').split('/');
var basePath = location[0] + '//' + location[2] + '/' + location[3] + '/'; bdyz(); });
//表单验证
function bdyz(){
validator= $("#zzw1").validate({
rules: {
"tue.name": {
required: true,
minlength: 3,
maxlength: 11,
},
"tue.idcard":{
required: true,
idcard:true,
remote:
{ //验证身份证是否存在
type:"POST",
url:"tuser!verifyIdcard.action",
data:{
name:function(){return $("#tue.idcard").val();}
}
}
},
"tue.sex":{
required: true,
},
"tue.phone": {
required: true,
digits:true,
minlength: 11,
maxlength:11, },
"tue.account": {
required: true,
minlength: 2,
maxlength: 10,
remote:
{ //验证身份证是否存在
type:"POST",
url:"tuser!verifyAccount.action",
data:{
name:function(){return $("#tue.account").val();}
}
} },
"tue.psw": {
required: true,
minlength: 2,
maxlength: 16,
},
"tue.type":{
required: true,
},
},
messages: {
"tue.name": {
required: '请输入姓名',
minlength: '姓名不能少于3个字符',
maxlength: '姓名不能超过11个字符',
},
"tue.idcard": {
required: '请输入证件号码',
idcard:'证件号不合法',
remote: '身份证已存在',
},
"tue.sex": {
required: '请输入性别',
},
"tue.phone": {
required: '请输入手机号码',
digits:'请输入数字',
minlength: '请输入11位数字',
maxlength: '输入位数大于12位', },
"tue.account": {
required: '请输入用户名',
minlength: '用户名不能小于2个字符',
maxlength: '用户名不能超过10个字符',
remote: '账号已存在', },
"tue.psw": {
required: '请输入密码',
minlength: '密码不能小于2个字符',
maxlength: '密码不能超过16个字符' },
"tue.type": {
required: '请输入用户类型',
}, } });
$.validator.addMethod("idcard", function(value, element, params){
var isIDCard1=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;
var isIDCard2=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$/;
if(isIDCard1.test(value)||isIDCard2.test(value))
return true;
else
return false;
}, $.validator.format("请填写正确证件号码！") );
}
后台ajax验证是否存在这个账号代码
//验证account是否已存在
public String verifyAccount() throws Exception{
int flag=0;//判断是否已存在用户的标志，默认不存在
String account =tue.getAccount();//用户名 userlist = tdao.listall();
for (int i = 0; i < userlist.size(); i++) {
Tuser ae2= userlist.get(i);
String[] s = new String[1];
s[0]=(ae2.getAccount());
if(s[0].equals(account))
flag=1;
}
if(flag==1)
this.getResponse().getWriter().print(false);//存在就给前台返回一个false
else
this.getResponse().getWriter().print(true);//不存在就给前台返回一个true
return null; }
引入juquery类库，和jquery.validate.js就可以了
jQuery 表单验证插件——Validation(基础)的更多相关文章
- 【jQuery基础学习】06 jQuery表单验证插件-Validation
jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等1 ...
- jQuery 表单验证插件 jQuery Validation Engine 使用
jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...
- jquery validate强大的jquery表单验证插件
jquery validate的官方演示和文档地址: 官方网站:http://jqueryvalidation.org/ 官方演示:http://jqueryvalidation.org/files/ ...
- 【jquery】Validform，一款不错的 jquery 表单验证插件
关于 Validform 这是一款很不错的 jquery 表单验证插件,它几乎能够满足任何验证需求,仅仅一行代码就能搞定整站的表单验证. $('form').Validform(); 为什么能如此方便 ...
- 轻量级实用JQuery表单验证插件：validateForm5
表单验证是Web项目一个必不可少的环节,而且是一项重复的劳动,于是小菜封装了一款简单的表单验证插件,名字叫:validateForm5. validateForm5插件基于Jquery,并向HTML5 ...
- (转)强大的JQuery表单验证插件 FormValidator使用介绍
jQuery formValidator表单验证插件是客户端表单验证插件.在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者(J ...
- 强大的JQuery表单验证插件 FormValidator使用介绍
jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者( ...
- Jquery表单验证插件validate
写在前面: 在做一些添加功能的时候,表单的提交前的验证是必不可少的,jquery的validate插件就还可以,对于基本的需求已经够了.这里记录下基本的用法. 还是写个简单的demo吧 <htm ...
- jQuery学习之路（8）- 表单验证插件-Validation
▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...
随机推荐
- const 笔记
.指向const的指针例如:double a=1.01;const double * b=&a;*b=2.1; //这显然是错误的a=2.1; //这是正确的,a和*b的值都会变成2.01,有 ...
- Yosemite重置Dock的命令
备忘 defaults write com.apple.dock ResetLaunchPad -bool true killall Dock
- BZOJ 1028 麻将
Description 麻将是中国传统的娱乐工具之一.麻将牌的牌可以分为字牌(共有东.南.西.北.中.发.白七种)和序数牌(分为条子.饼子.万子三种花色,每种花色各有一到九的九种牌),每种牌各四张.在 ...
- 人在江湖飘，哪能不挨刀。CENTOS之后，UBUNTU,FEDORA都要安装起来作测试啊
还好,我们有VIRTUAL BOX.
- ajax异步请求不能刷新数据的问题
搞了两三天的问题,今天解决了.总结下: function reportGrpChange(cuid, title){ document.getElementById('reportFrameDiv') ...
- 获取Delphi所有类的类信息
Delphi遍历进程中所有Class的TypeInfo,即便是在implementation中的class或者其他 class的private的子class. 一般普通EXE中的TypeInfo存放在 ...
- 如何查看SQL Server的数据库实例名
其实一般默认就是MSSQLSERVER (注意,就是英文大写). 点击开始,运行,services.mcs 然后查阅所有SQL Server的项,其中括号中字符串的就是实例名 reference: ...
- 【HDOJ】2363 Cycling
二分+Dijkstra. #include <iostream> #include <cstdio> #include <cstring> #include < ...
- phpMyAdmin <= 4.0.4.1 import.php GLOBALS变量注入漏洞
漏洞版本: phpMyAdmin <= 4.0.4.1 漏洞描述: CVE(CAN) ID: CVE-2013-4729 phpmyadmin是MySQL数据库的在线管理工具,主要功能包括在线创 ...
- Android 金融项目整理
本来是安安心心周末休假的时间,却被强征来加班.魔都今天雾霾严重,窗外都看不到360无死角都能看到的东方明珠.吃完午饭后睡一觉起来,觉得该给自己做点事情了.那就把项目里面的一些可圈可点的技术都罗列出来, ...