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 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...
随机推荐
- 实战EntityFramework
删除对象一定要在同一个context 我尝试这在两个方法中使用两个context(Container)实例来进行一个获得一个删除,结果我获得的”The object cannot be deleted ...
- Mac电脑手动清理
Xcode的无用的文件如图找到DerivedData文件夹,删除里面文件就可以了(先找到隐藏的文件)
- iOS证书详解－－再转
一.成员介绍1. Certification(证书)证书是对电脑开发资格的认证,每个开发者帐号有一套,分为两种:1) Developer Certification(开发证书)安装在电脑上 ...
- Dao 处理
1. 写一个基础的接口和类来做基本的操作 /** * */ package com.wolfgang.dao; import java.util.List; /** * @author Adminis ...
- 【Java】Java垃圾回收机制
Java垃圾回收机制 说到垃圾回收(Garbage Collection,GC),很多人就会自然而然地把它和Java联系起来.在Java中,程序员不需要去关心内存动态分配和垃圾回收的问题,这一切都交给 ...
- maven jetty plugin
转载:http://blog.163.com/xueling1231989@126/blog/static/1026408072013101311395492/ 前言: 在 maven 下测试调试时, ...
- 【HDOJ】1818 It's not a Bug, It's a Feature!
状态压缩+优先级bfs. /* 1818 */ #include <iostream> #include <queue> #include <cstdio> #in ...
- Unity NGUI实现序列帧动画播放
如题,要实现序列帧的播放导入图片的时候需要注意: (1)图片的命名要连续,如图: (2)将这些图片在NGUI中打包成Altas图集的时候图片应该在同一个Altas中: 这里以播放特效为例,满足条件时播 ...
- 【转】图说Android的8年演变史
原文网址:http://tech.gmw.cn/2016-02/17/content_18916338_14.htm 图说Android的8年演变史 我有话说 0 2011年10月谷歌 ...
- （转载）PHP去掉转义后字符串中的反斜杠\函数stripslashes
(转载)http://www.beijibear.com/index.php?aid=182 addslashes()函数主要是在字符串中添加反斜杠对特殊字符进行转义,stripslashes()则是 ...