今天编写一个表单验证程序,我来说一下今天遇到的坑:程序不是通过submit按钮提交验证的,是在自己写的一个方法中提交的,出现了表单无法验证的情况。然后我就了解了一下jquery validate的验证方法。

    jquery validate表单验证方式有三个:

    1、直接通过submit方式提交,提交时自动验证(常用的方法,不懂得可以查看 菜鸟教程-validate使用

    2、如果不是submit提交,比如在jquery中的某个事件中,调用提交表单事件的情况,在此时,1中的情况就不适用了(可能出现表单不验证的方法),这也是我遇到的问题

      这就需要自己先编写一个表单验证程序,验证通过后,再提交表单。

     //编写的表单验证程序 
     function validateForm() {
return $("#cashForm").validate({
rules: {
name: {
required: true
},
phone: {
required: true,
pattern: /^0?(13[0-9]|15[012356789]|18[012346789]|14[57]|17[678]|170[059]|14[57]|166|19[89])[0-9]{8}$/
},
carId: {
required: true,
pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
},
number: {
required: true,
remote: {
url: "${base}/business/cash/check_card",
cache: false
}
}
},
messages: {
phone: {
pattern: "${message("common.validate.pattern")}"
},
number: {
remote: "${message("common.validate.pattern")}"
}
}
}).form();
}

    提交表单事件:(以下函数是验证码验证通过后,触发的表单验证,红色加粗部分,大家写的时候可以直接用此部分)

     $(document).ready(function(){
var $cashForm = $("#cashForm"); //获取验证码按钮绑定点击事件
$(".verIfi-btn").on("click",verification); $("#sms_check").click(function () {
var smsCaptcha = $("input[name='smsCaptcha']").val();
var smsCaptchaId = $("input[name='smsCaptchaId']").val();
$.ajax({
url: "${base}/business/cash/sms_check",
type: "GET",
data:{
smsCaptchaId: smsCaptchaId,
smsCaptcha: smsCaptcha
},
dataType: "json",
cache: false,
success: function(message) {
if (message.check){
if(validateForm()){
$cashForm.submit();
}

}
}
});
});
});

    3、验证一个单独的表单元素(校验规则写在空间中的时候使用)

    例如:

<textarea id="ccomment" name="comment" maxlength="200" required></textarea>

    验证方法:

    function validateForm() {
$("#commentForm").validate().element($("#ccomment"));
} function doSubmit(){
//do other things
//验证通过后提交
if(validateForm()){
  $("#commentForm").submit()
}
}

    参考:http://layznet.iteye.com/blog/1168811

validate表单验证-单独验证的更多相关文章

  1. 基于jQuery的Validate表单验证

    表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~  而我工作中用到最多的就是基于基于jQuery的Validate表单验证~  就向下面这样~ 因为今天有个朋 ...

  2. ASP.NET MVC Jquery Validate 表单验证的多种方式

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

  3. jQuery Validate 表单验证插件----Validate简介,官方文档,官方下载地址

     一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆 ...

  4. 【干货】Laravel --Validate (表单验证) 使用实例

    前言 : Laravel 提供了多种方法来验证应用输入数据.默认情况下,Laravel 的控制器基类使用ValidatesRequests trait,该trait提供了便利的方法通过各种功能强大的验 ...

  5. [转]ASP.NET MVC Jquery Validate 表单验证的多种方式介绍

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

  6. Jquery Validate 表单验证的多种方式

    ASP.NET MVC Jquery Validate 表单验证的多种方式 在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体 ...

  7. jQuery-easyui和validate表单验证实例

    jQuery EasyUI 表单 - 表单验证插件validatebox 使用时需要向页面引入两个css文件如下: <link rel="stylesheet" href=& ...

  8. summernote富文本编辑器配合validate表单验证无法进行表单提交的问题

    1.使用summernote富文本编辑器提交图片到服务器 在使用bootstrap中,我们用到了summernote富文本编辑器,使用summernote将图片上传到服务器中,参考我的上篇文章http ...

  9. thinkphp图片上传+validate表单验证+图片木马检测+缩略图生成

    目录 1.案例 1.1图片上传  1.2进行图片木马检测   1.3缩略图生成   1.4控制器中调用缩略图生成方法 1.案例 前言:在thinkphp框架的Thinkphp/Library/Thin ...

随机推荐

  1. 杭电 2028 ( Lowest Common Multiple Plus )

    链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=2028 题目要求:就是求最大公倍数,我百度了一下,最好实现的算法就是:       公式法 由于 ...

  2. 02-03Android学习进度报告三

    今天主要学习了线性布局和相对布局的概念和区别,以及线性布局和相对布局的优缺点. 经过搜素发现,我们屏幕适配的使用用的比较多的就是LinearLayout的权重属性weight,我 学习了一些 Line ...

  3. 【 JdbcUtils 】mysql数据库查询

    JdbcUtils package k.util; import java.sql.*; import java.util.ArrayList; import java.util.HashMap; i ...

  4. 奈奎斯特采样定理(Nyquist)

    采样定理在1928年由美国电信工程师H.奈奎斯特首先提出来的,因此称为奈奎斯特采样定理. 1933年由苏联工程师科捷利尼科夫首次用公式严格地表述这一定理,因此在苏联文献中称为科捷利尼科夫采样定理. 1 ...

  5. Python—数据类型之集合(Set)

    1.集合是一个无序的,且不重复元素的集合.它里面的元素是可哈希的(不可变类型),但是集合本身是不可哈希(所以集合做不了字典的键)的. 2.基本功能包括关系测试和消除重复元素.注意:集合存在的意义就是去 ...

  6. 130、Java面向对象之static关键字二(在没有实例化对象产生时直接操作static属性)

    01.代码如下: package TIANPAN; class Book { // 描述的是同一个出版社的信息 private String title; // 普通属性 private double ...

  7. 普通用户切换不到root用户--权限更改

    https://blog.csdn.net/lianjoke0/article/details/82598149 [root@java133 ~]# ll /etc/passwd -rw-r--r-- ...

  8. pytorch神经网络解决回归问题(非常易懂)

    对于pytorch的深度学习框架,在建立人工神经网络时整体的步骤主要有以下四步: 1.载入原始数据 2.构建具体神经网络 3.进行数据的训练 4.数据测试和验证 pytorch神经网络的数据载入,以M ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:用于要弹出信息的按钮

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. 2017 青岛现场赛 Suffix

    Consider n given non-empty strings denoted by s1 , s2 , · · · , sn . Now for each of them, you need ...