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( ...
随机推荐
- 《Ensemble Methods: Foundations and Algorithms》
<Ensemble Methods: Foundations and Algorithms>
- null与“ ”的区别
null是空对象,""是空字符串 null可以赋值给任何对象 ""只能赋值给字符串对象 String s=null; string.trim()就会抛出为空的e ...
- 论文阅读笔记六十二:RePr: Improved Training of Convolutional Filters(CVPR2019)
论文原址:https://arxiv.org/abs/1811.07275 摘要 一个训练好的网络模型由于其模型捕捉的特征中存在大量的重叠,可以在不过多的降低其性能的条件下进行压缩剪枝.一些skip/ ...
- Tiling Terrace CodeForces - 1252J（dp、贪心）
Tiling Terrace \[ Time Limit: 1000 ms\quad Memory Limit: 262144 kB \] 题意 给出一个字符串 \(s\),每次可以选择三种类型来获得 ...
- Redis面试题（46题）
1.什么是Redis?简述它的优缺点? Redis 的全称是:Remote Dictionary.Server,本质上是一个 Key-Value 类型的内存数据库,很像memcached,整个数据库统 ...
- windwos文件句柄数限制
1.修改注册表,位置如下: HKEY_LOCAL_MACHINE/SOFTWARE/Microsoft/Windows NT/CurrentVersion/Windows 2.设置 1.GDIProc ...
- 7.29 NOIP模拟测试10 辣鸡(ljh)+模板(ac)+大佬(kat)
T1 辣鸡(ljh) 就是一道分类讨论的暴搜,外加一丢丢的减枝,然而我挂了,为啥呢,分类讨论变量名打错,大于小于号打反,能对才怪,写了sort为了调试就注释了,后来忘了解开,小减枝也没打.但是这道题做 ...
- Webpack 一些核心概念了解
Webpack的几个核心概念 Entry:入口,Webpack执行构建的第一步将从Entry开始,可抽象成输入. Module:模块,在Webpack里一切皆模块,一个模块对应一个文件.Webpack ...
- 国家集训队 Crash 的文明世界（第二类斯特林数+换根dp）
题意 题目链接:https://www.luogu.org/problem/P4827 给定一棵 \(n\) 个节点的树和一个常数 \(k\) ,对于树上的每一个节点 \(i\) ,求出 \( ...
- ECMAScript 初探 - 基础篇
ECMAScript 语言的标准是由 Netscape.Sun.微软.Borland 等公司基于 JavaScript 和 JScript 锤炼.定义出来的. ECMAScript 仅仅是一个描述,定 ...