jQuery Validate验证框架详解，提交前验证
现在都用h5表单进行验证了，以下方式仅做回忆
https://www.runoob.com/jquery/jquery-plugin-validate.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> <title>jQuery Validate验证框架详解</title> <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery.validate.min.js"></script>
<script type="text/javascript">
$(function(){
var validate = $("#myform").validate({ rules:{
myname:{
required:true
},
email:{
required:true,
email:true
},
password:{
required:true,
rangelength:[3,10]
},
confirm_password:{
equalTo:"#password"
}
},
messages:{
myname:{
required:"必填"
},
email:{
required:"必填",
email:"E-Mail格式不正确"
},
password:{
required: "不能为空",
rangelength: $.format("密码最小长度:{0}, 最大长度:{1}。")
},
confirm_password:{
equalTo:"两次密码输入不一致"
}
}，
debug: true, //调试模式取消submit的默认提交功能
//errorClass: "label.error", //默认为错误的样式类为：error
focusInvalid: false, //当为false时，验证无效时，没有焦点响应
onkeyup: false,
submitHandler: function(form){ //表单提交句柄,为一回调函数，带一个参数：form
alert("提交表单");
form.submit(); //提交表单
},
}); }); </script> </head>
html:
<body>
<form id="myform" method="post" action="">
<p>
<label for="myname">用户名：</label>
<!-- id和name最好同时写上 -->
<input id="myname" name="myname" />
</p>
<p>
<label for="email">E-Mail：</label>
<input id="email" name="email" />
</p>
<p>
<label for="password">登陆密码：</label>
<input id="password" name="password" type="password" />
</p>
<p>
<label for="confirm_password">确认密码：</label>
<input id="confirm_password" name="confirm_password" type="password" />
</p>
<p>
<input class="submit" type="submit" value="立即注册" />
</p>
</form>
</body>
</html>
自定义验证：
$.validator.addMethod(
"zidingyi", //验证方法名称
function(value, element, param){ //验证规则
var reg=new RegExp(/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$)/);
if(!reg.test(value)){
return false;
}
return true;
},
'请填写正确的身份证号'//验证提示信息
);
调用方法：
//input验证
$("#form-article-add").validate({
rules: {
p_name: {
required: true,
},
jm_name: {
required: true,
},
real_name:{
required:true,
maxlength:12,
},
grade:{
required:true,
},
id_card:{
zidingyi1:true,
required:true,
},
自己开发功能：
$(function(){
//input验证
$("#form-article-add").validate({
rules:{
sort:{
required:true,
min:1,
max:999,
digits:true,
},
num:{
required:true,
min:1,
max:999,
digits:true,
},
price:{
required:true,
decimalpoint:true,
},
reference:{
required:true,
min:1,
max:99999
},
starttime:{
required:true,
date:true,
},
endtime:{
required:true,
date:true,
},
},
messages: {
},
onkeyup:true,
debug:true, //debug模式，开启时submitHandler出错也不会跳转页面
/*保存并提交时执行的事件*/
submitHandler:function(){
var ti=document.getElementById('input_img');
/*if (!ti.files || !ti.files[0]) {
return layer.msg('必须选择详情图');
}*/
if (!ti.files || !ti.files[0]) {
if(filetype) {
ti.files = filetype;
if(!ti.files) {
return layer.msg('必须选择详情图');
}
}else{
return layer.msg('必须选择详情图');
}
}
var tii=document.getElementById('input_hxi');
/*if (!ti.files || !ti.files[0]) {
return layer.msg('必须选择历史小图');
}*/
if (!tii.files || !tii.files[0]) {
if(historyimg) {
tii.files = historyimg;
if(!tii.files) {
return layer.msg('必须选择历史小图');
}
}else{
return layer.msg('必须选择历史小图');
}
}
//判断基准为小数后两位
var referenceid=document.getElementById("reference").value;
var reg = /^\d+(\.\d{1,2})?$/;
var isfloat = reg.test(referenceid);//console.log(isfloat);
if (referenceid%1 !== 0 && !isfloat){
$("#reference").focus();
return layer.msg('小数后面只能写两位');
}
var titles=document.getElementById('title').value;
if(/[~!@#$^&*()=|{}':;',\[\].<>/?~！@#￥……&*（）——+|{}【】‘；：”“'。，、？]/.test(titles))
{
return layer.msg('标题不能含有非法字符');
}
if (titles.length>15) {
return layer.msg('标题必须小于15个字符');
}
var pd=false;
layer.confirm('确认添加业绩活动?',function() {
if (pd) {
return;
}
pd = true;
layer.load(0,{
shade:[0.5,'#fff'],
zindex:1
});
var formData = new FormData();
formData.append("file0",$("#input_img")[0].files[0]);
formData.append("file1",$("#input_hxi")[0].files[0]);
formData.append("public_key",'<?php echo C('imgparam')['public_key']; ?>');
formData.append("type",6);
$.ajax({
url: '<?php echo C('web_server_url_admin'); ?>',
data:formData,
processData:false,
contentType:false,
type: 'POST',
dataType: "JSON",
success: function (data) {
alert();
},
error: function () {
layer.msg('图片上传连接失败，请检查您的网络连接',function(){layer.closeAll();})
},
});
});
}
});
});
jQuery Validate验证框架详解，提交前验证的更多相关文章
- jQuery Validate验证框架详解
转自:http://www.cnblogs.com/linjiqin/p/3431835.html jQuery校验官网地址:http://bassistance.de/jquery-plugins/ ...
- 【转】jQuery Validate验证框架详解
jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 <script type=& ...
- jQuery Validate验证框架详解(转)
jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 <script type=& ...
- atitit.jQuery Validate验证框架详解与ati Validate 设计新特性
atitit.jQuery Validate验证框架详解与ati Validate 设计新特性 1. AtiValidate的目标1 2. 默的认校验规则1 2.1. 使用方式 1.metadata用 ...
- jQuery Validate验证框架详解(jquery.validate.min.js)
原博客 jQuery Validate验证框架详解 jQuery校验官网地址:https://jqueryvalidation.org/ 一.导入js库 <script type="t ...
- jquery.validate.js 验证框架详解
项目中遇到这个js框架 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...
- 使用jquery.validate组件进行前端数据验证并实现异步提交前验证检查
学习如鹏网掌上组的项目开发,使用到了前端验证,视频里使用的ValidateForm验证框架,但是我使用的Hui的框架中使用的是jquery.validate验证框架 所以自行学习jquery.vali ...
- jQuery.Validate验证库详解
一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...
- 触碰jQuery：AJAX异步详解
触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...
随机推荐
- CF306C White, Black and White Again
CF306C White, Black and White Again 洛谷评测传送门 题目描述 Polycarpus is sure that his life fits the descripti ...
- CloudCompare打开pcd文件
Ubuntu下CloudCompare稳定版本无法打开pcd点云文件,切换到edge版本即可 $ sudo snap refresh --edge cloudcompare
- 【未完成】【plsql】与oracle配置
待写——————————————————————————————————————-
- 微信小程序入门笔记
目录的作用: 1. pages目录: 该目录下存放所有的定义页面 2. utils目录: 该目录下存放定义的一些小功能组件 3. 根目录下app.js文件: 定义小程序对象, 执行小程序生命周期内的各 ...
- 7.16 NOIP模拟测试4 礼物+通讯+奇袭
T1 礼物 题目大意:n个物品,每次有pi的概率买到,可以重复买,也可以什么都没买到,但算一次购买,问把所有东西都买到的期望次数.对于10%的数据,N = 1;对于30%的数据,N ≤ 5;对于100 ...
- Linux性能优化实战学习笔记：第十八讲
一.内存的分配和回收 1.管理内存的过程中,也很容易发生各种各样的“事故”, 对应用程序来说,动态内存的分配和回收,是既核心又复杂的一的一个逻辑功能模块.管理内存的过程中,也很容易发生各种各样的“事故 ...
- 虚拟路由冗余(VRRP)协议
1. 前言 VRRP(Virtual Router Redundancy Protocol)协议是用于实现路由器冗余的协议,最新协议在RFC3768中定义,原来的定义RFC2338被废除,新协议相对还 ...
- 从excel中转存sql
1.pom文件 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="htt ...
- 关于Design Complier/Library Compiler的跌坑（坑爹）记录
最近需要用DC做一些事,然后需要转库,中午偷个闲,特来记录一下中间的一些坎坷. 1.首先是要转库.我们只有.lib文件的格式,所以需要把.lib文件转换成.db格式.然后坑来了!!!DC2015及以后 ...
- oracle-报错 RMAN-03002,RMAN-06172
RMAN> restore standby controlfile from "/data/oracle/contral.ctl"; Starting restore at ...