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( ...
随机推荐
- hdfs.server.datanode.DataNode: Block pool ID needed, but service not yet registered with NN
启动hadoop 发现 50070 的 livenode 数量是 0 查看日志, hdfs.server.datanode.DataNode: Block pool ID needed, but se ...
- 树莓派“Wlan0: Not associated”报错解决方案
当执行 ifconfig wlan0 时,是有wlan0的网卡信息输出的. 当执行 ifconfig wlan0 up 是没问题的(即没有任何输出). 执行 iwlist wlan0 scan | g ...
- [LeetCode] 377. Combination Sum IV 组合之和之四
Given an integer array with all positive numbers and no duplicates, find the number of possible comb ...
- [LeetCode] 48. Rotate Image 旋转图像
You are given an n x n 2D matrix representing an image. Rotate the image by 90 degrees (clockwise). ...
- java web开发入门六（spring mvc）基于intellig idea
spring mvc ssm=spring mvc+spring +mybatis spring mvc工作流程 1A)客户端发出http请求,只要请求形式符合web.xml文件中配置的*.actio ...
- thinkphp的普通查询与表达式查询
一.普通查询方式 a.字符串:$arr=$m->where("sex=0 and username='gege'")->find();//字符串需要加引号 b.数组 $ ...
- 初识Go语言--（2）Hello World
新建hello.go文件,内容如下 package main import "fmt" func main() { //输出Hello World fmt.Println(&quo ...
- SpringBoot整合mybatis及注意事项
SpringBoot整合mybatis及注意事项 主要步骤 添加依赖 mybatis 在配置文件中配置数据源信息 编写pojo mapper接口 mapeer映射文件 手动配置mybatis的包扫描 ...
- D-Bus
D-Bus三层架构 D-Bus是一个为应用程序间通信的消息总线系统, 用于进程之间的通信.它是个3层架构的IPC 系统,包括: 1.函数库libdbus ,用于两个应用程序互相联系和交互消息. 2.一 ...
- dp - 最大子矩阵和 - HDU 1081 To The Max
To The Max Problem's Link: http://acm.hdu.edu.cn/showproblem.php?pid=1081 Mean: 求N*N数字矩阵的最大子矩阵和. ana ...