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 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...
随机推荐
- api1
http://www.android-doc.com/reference/android/app/Fragment.html
- [POJ 2774] Long Long Message 【后缀数组】
题目链接:POJ - 2774 题目分析 题目要求求出两个字符串的最长公共子串,使用后缀数组求解会十分容易. 将两个字符串用特殊字符隔开再连接到一起,求出后缀数组. 可以看出,最长公共子串就是两个字符 ...
- Following Orders
uva124:http://uva.onlinejudge.org/index.php?option=onlinejudge&page=show_problem&problem=60题 ...
- All in All
Crawling in process... Crawling failed Description You have devised a new encryption technique which ...
- c# 哈希表集合；函数
* 哈希表集合 1.先进去的后出来,最后进去的先出来 2.利用枚举类型打印出集合中的Key值和Value值 ** 函数 1.函数:能够独立完成某项功能的模块. 函数四要素:输入.输出.函数体.函数名 ...
- 从ulimit命令看socket的限制
从ulimit命令看socket的限制 在Linux下面部署应用的时候,有时候会遇上Socket/File: Can’t open so many files的问题,比如还有Squid做代理,当文 ...
- 图论（KM算法，脑洞题）：HNOI 2014 画框(frame)
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABPoAAANFCAIAAABtIwXVAAAgAElEQVR4nOydeVxTV/r/n9ertaJEC4
- 如何解决编译linux内核（解决声卡问题），遭遇fatal error: linux/limits.h: 没有那个文件或目录
最近帮一位上海的朋友搞一块小板,在ubuntu15.04 vivid上已经加载了对应了.ko驱动包 但关键是系统根本就枚举不到该声卡ALC5640,试了OpenSUSE也是一样的结果,看来是内核漏加载 ...
- 数据结构——N皇后放置方法种数
Description 在N*N的方格棋盘放置了N个皇后,使得它们不相互攻击(即任意2个皇后不允许处在同一排,同一列,也不允许处在与棋盘边框成45角的斜线上. 你的任务是,对于给定的N,求出有多少种合 ...
- 从大学开始学C++到现在的一些感悟
Since I choose this road, I will not regret it. --Mereyct 端午过后的第二天,闲着没事,更新一下博客. 写这个博客的原因是,看到了群里有 ...