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( ...
随机推荐
- Linux下Maven安装（十二）
一.前提条件 下载并安装好JDK .在终端输入命令“java -version”,如果出现类似如下信息说明JDK安装成功. 二.开始配置Maven 1. 下载maven:http://mirror.b ...
- Gson：
- 论文阅读笔记五十九:Res2Net: A New Multi-scale Backbone Architecture（CVPR2019）
论文原址:https://arxiv.org/abs/1904.01169 摘要 视觉任务中多尺寸的特征表示十分重要,作为backbone的CNN的对尺寸表征能力越强,性能提升越大.目前,大多数多尺寸 ...
- ASP.NET Core 中的 依赖注入介绍
ASP.NET Core 依赖注入 HomeController public class HomeController : Controller { private IStudentReposito ...
- 洛谷 P4290 [HAOI2008]玩具取名
传送门 思路 博客半年没更新了,来更新个博文吧 在\(dsr\)聚聚博客的帮助下,我用半个上午和一个中午的时间苟延残喘地完成了这道题 先是读题目读大半天,最后连个样例都看不懂 之后又是想思路,实在想不 ...
- PATA1075 PAT Judge (25 分)
The ranklist of PAT is generated from the status list, which shows the scores of the submissions. Th ...
- Linux性能优化实战学习笔记：第三十八讲
一.上节回顾 上一节,我们学习了 DNS 性能问题的分析和优化方法.简单回顾一下,DNS 可以提供域名和 IP 地址的映射关系,也是一种常用的全局负载均衡(GSLB)实现方法. 通常,需要暴露到公网的 ...
- Vue插槽详解 | 什么是插槽？
作者 | Jeskson 来源 | 达达前端小酒馆 什么是插槽?插槽的指令为v-slot,它目前取代了slot和slot-scope,插槽内容,vue实例一套内容分发的api,将slot元素作为承载分 ...
- 小i机器人
//机器人回复 function xiaoirobot($openid, $content) { //定义app $app_key = ""; $app_secret = &quo ...
- 了解jsp,这一篇就够了.
jsp的执行过程: 1 客户端发出请求. 2 Web容器将JSP转译成Servlet源代码. 3 Web容器将产生的源代码进行编译. 4 Web容器加载编译后的代码并执行. 5 把执行结果响应至客户端 ...