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( ...
随机推荐
- LG3004 「USACO2010DEC」Treasure Chest 区间DP+滚动数组优化
问题描述 LG3004 题解 把拿走的过程反向,看做添加的过程,于是很显然的区间DP模型. 设\(opt_{i,j}\)代表区间\([i,j]\)中Bessie可以获得的最大值,显然有 \[opt_{ ...
- 基于Distiller的模型压缩工具简介
Reference: https://github.com/NervanaSystems/distiller https://nervanasystems.github.io/distiller/in ...
- django -- admin里的配置
前戏 Django给我们提供了一个后台管理系统,方便我们进行数据表的管理 创建超级用户 python manage.py createsuperuser 配置 默认我们登录到后台不显示任何一张表,如果 ...
- nowcoder911L 最优子区间
题目链接 思路 用\(f(i,j)\)表示前i个元素,以i为右端点,j为左端点时的答案. 用个"区间修改,单点查询"的线段树维护出第二维.在从左往右枚举i的过程中.将\([lst_ ...
- [LeetCode] 63. Unique Paths II 不同的路径之二
A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). The ...
- PKUWC2020游记
PKUWC2020在2019年举行是真的沙雕 晚个两星期我就能逃掉期末考了 Day \(-\infty\) 开始停课训练,和ntf.lzy一起. atcoder真好玩,只可惜我没脑子-- kenkoo ...
- Excel输入十六进制数，以及十六进制运算
网上复制来复制去的连个靠谱答案都没有...f**k 所以无奈自己探索出来了 先放效果图 文本值 转 进制值 单元格: A1文本值 A2进制值 输入内容: 'fefe =OCT2HEX(HEX2OCT( ...
- 【Arch安装】
[Arch安装]不完整,凭记忆补充 1,制作安装介质(请跳转链接:https://www.archlinux.org/download/) 2,从UEFI模式启动后,按照官方WIKI向导操作(http ...
- Centos7.5 安装Mysql5.7
#yum -y install wget #wget -i -c http://dev.mysql.com/get/mysql57-community-release-el7-10.noarch.rp ...
- 如何解决aws解绑银行卡问题？
首先先来说明一下我自己的情况? 一年的免费使用 前提:没有开启任何的实例服务 先贴一条官方的解释 关于我小白一个.学校课程要求使用aws,注册之后在网络上看到一堆人踩坑,aws的扣费就是个坑! 预授权 ...