1.轻量级的JavaScript表单验证

在应用中引用 validator.min.js 文件

<script type="text/javascript" src="dist/validator.min.js"></script>

实例:

<form id="example_form">
<div>
<label for="email">邮箱验证</label>
<input type="email" name="email" id="email" class="form-control" placeholder="Email">
</div>
</form>
<script type="text/javascript">
var validator = new Validator('example_form',[
{
//name 字段
name: 'email',
display:"你输入的不{{email}}是合法邮箱|不能为空|太长|太短",
// 验证条件
rules: 'is_emil|max_length(12)|required'
// rules: 'valid_email|required|max_length(12)|min_length(2)'
},{
//name 字段
name: 'sex',
display:"请你选择性别{{sex}}",
// 验证条件
rules: 'required'
}
],function(obj,evt){
if(obj.errors){
// 判断是否错误
}
})
</script>

说明:

new Validator(formName, option, callback)

formName

formName 是标签中<form> 中的 id 或者 name 的值,如上面的example_form

option

  • name -> input 中 name 对应的值
  • display -> 验证错误要提示的文字 {{这个中间是name对应的值}}
  • rules -> 一个或多个规则(中间用|间隔)

    • is_email -> 验证合法邮箱
    • is_ip -> 验证合法 ip 地址
    • is_fax -> 验证传真
    • is_tel -> 验证座机
    • is_phone -> 验证手机
    • is_url -> 验证URL
    • required -> 是否为必填
    • max_length -> 最大字符长度
    • min_length -> 最小字符长度

自定义正则

自定义正则,以regexp_开始

{
//name 字段
name: 'sex',
// 对应下面验证提示信息
display:"请你选择性别{{sex}}|请输入数字",
//自定义正则`regexp_num`
regexp_num:/^[0-9]+$/,
// 验证条件,包括应用自定义正则`regexp_num`
rules: 'required|regexp_num'
}

字符串验证:

var v = new Validator();
v.isEmail('wowohoo@qq.com'); // -> 验证合法邮箱 |=> 返回布尔值
v.isIp('192.168.23.3'); // -> 验证合法 ip 地址 |=> 返回布尔值
v.isFax(''); // -> 验证传真 |=> 返回布尔值
v.isPhone('13622667263'); // -> 验证手机 |=> 返回布尔值
v.isTel('021-324234-234'); // -> 验证座机 |=> 返回布尔值
v.isUrl('http://JSLite.io'); // -> 验证URL |=> 返回布尔值
v.maxLength('JSLite',12); // -> 最大长度 |=> 返回布尔值
v.minLength('JSLite',3); // -> 最小长度 |=> 返回布尔值
v.required('23'); // -> 是否为必填(是否为空) |=> 返回布尔值

表单中验证

点击按submit按钮验证和没有submit验证的区别:没有submit验证需要在结尾加上

validator.validate()

2.Jquery  .validate()表单验证

validate([options]):

1.debug(default: false)

$(".selector").validate({
debug: true
});

启用调试模式。如果为true,表单不会提交,并且错误显示在控制台(如果window.console属性存在,将检查)上,如试图帮助建立验证约缺少方法和其他调试消息警告。。尝试当一个表单刚刚提交,而不是验证停止提交启用。

2.submitHandler (default: native form submit)

ex:

Submits the form via Ajax when valid.

$(".selector").validate({
submitHandler: function(form) {
$(form).ajaxSubmit();
}
});

ex:

使用submitHandler处理一些东西,然后使用默认的提交。注意,form是指一个DOM元素,这样一来验证不会再次触发。

3.invalidHandler

无效表单提交时,回调客户端代码。调用事件对象作为第一个参数,验证为第二个参数。

ex:

表单上显示错误消息,表明当用户试图提交无效表单有多少个字段是无效的。

$(".selector").validate({
invalidHandler: function(event, validator) {
// 'this' refers to the form
var errors = validator.numberOfInvalids();
if (errors) {
var message = errors == 1
? 'You missed 1 field. It has been highlighted'
: 'You missed ' + errors + ' fields. They have been highlighted';
$("div.error span").html(message);
$("div.error").show();
} else {
$("div.error").hide();
}
}
});

4.ignore (default: ":hidden")

验证时,简单地筛选出需要忽略的元素。

ex:Ignores all elements with the class "ignore" when validating.

$("#myform").validate({
ignore: ".ignore"
});

5.rules (default: rules are read from markup (classes, attributes, data))

ex:

$(".selector").validate({
rules: {
// simple rule, converted to {required:true}
name: "required",
// compound rule
email: {
required: true,
email: true
}
}
});
$(".selector").validate({
rules: {
contact: {
required: true,
email: {
depends: function(element) {
return $("#contactform_email").is(":checked");
}
}
}
}
});
$(".selector").validate({
rules: {
// at least 15€ when bonus material is included
pay_what_you_want: {
required: true
min: {
// min needs a parameter passed to it
param: 15,
depends: function(element) {
return $("#bonus-material").is(":checked");
}
}
}
}
});

6.messages (default: the default message for the method used)

ex:

$(".selector").validate({
rules: {
name: "required",
email: {
required: true,
email: true
}
},
messages: {
name: "Please specify your name",
email: {
required: "We need your email address to contact you",
email: "Your email address must be in the format of name@domain.com"
}
}
});
$(".selector").validate({
rules: {
name: {
required: true,
minlength: 2
}
},
messages: {
name: {
required: "We need your email address to contact you",
minlength: jQuery.validator.format("At least {0} characters required!")
}
}
});

7.groups

Use a table layout for the form, placing error messags in the next cell after the input.

$("#myform").validate({
groups: {
username: "fname lname"
},
errorPlacement: function(error, element) {
if (element.attr("name") == "fname" || element.attr("name") == "lname" ) {
error.insertAfter("#lastname");
} else {
error.insertAfter(element);
}
}
});

8.showErrors

Update the number of invalid elements each time an error is displayed. Delegates to the default implementation for the actual error display.

$(".selector").validate({
showErrors: function(errorMap, errorList) {
$("#summary").html("Your form contains "
+ this.numberOfInvalids()
+ " errors, see details below.");
this.defaultShowErrors();
}
});

表单验证——JavaScript和Jquery版的更多相关文章

  1. jQuery Validate 表单验证插件----利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面 ...

  2. Day5 JavaScript(三)事件、表单验证以及初识jQuery

    事件 1)鼠标事件 mousedown mouseup 2)键盘事件 a) keydown:键被按下 b) keyup:键抬起 c) keypress:按下可打印字符的键时. document.onk ...

  3. 表单验证插件之jquery.validate.js

    提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...

  4. 简单的表单验证插件(Jquery)

    在做web开发的时候经常遇到表单验证问题,表单验证一般有客户端验证和服务器端验证,这个验证插件仅仅能满足我的项目中的基本需求的. Validate_Tools.js function Validate ...

  5. 表单验证代码实例:jquery.validate.js表单验证插件

    jquery.validate.js是JQuery旗下的一个验证插件,借助JQuery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法.使用前请先下载必要的JQuery插件:jq ...

  6. 【表单验证】基于jQuery的高度灵活的表单验证(无UI)

    表单验证是前端开发过程中常见的一个需求,产品需求.业务逻辑的不同,表单验证的方式方法也有所区别.而最重要的是我们要清楚,表单验证的核心原则是--错误信息提示准确,并且尽可能少的打扰/干扰用户的输入和体 ...

  7. form表单验证-Javascript

    Form表单验证: js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等.完整代码如下: <!DOCTYPE html PUBLIC &qu ...

  8. 简单的表单验证(js、jquery)

    //javascript代码 function valForm(){ var username=document.getElementById("username"); var p ...

  9. 课堂 表单验证 JavaScript js

    页面加载完才开始执行代码要加上 window.onload = function{ } 获取元素节点 var uesrname = document.getElementById("user ...

随机推荐

  1. js图形网站

    在做项目的时候难免会遇到要画各式各样的图形,这里推荐一个网站 http://echarts.baidu.com/doc/example.html 这个网站各种各样的图形都有,还有案例,相当不错

  2. 最新Sublime Text 2 激活 汉化

    0x00 Sublime Text 2 Sublime Text 2 是一个轻量.简洁.高效.跨平台的编辑器,一直在使用它,简直是coder的必备神器,自从使用它之后就深深爱上它了(/▽\=),可能因 ...

  3. mysql 判断表字段或索引是否存在

    判断字段是否存在: DROP PROCEDURE IF EXISTS schema_change; DELIMITER // CREATE PROCEDURE schema_change() BEGI ...

  4. 从拟物化到扁平,再到Material Design

    Google I/O 2014提出Material Design,这段时间听到不少关于Material Design的解读,至此Google已经定位了自己的设计语言,我个人看来就是Android和iO ...

  5. 十五天精通WCF——第八天 对“绑定”的最后一点理解

    转眼已经中断10几天没有写博客了,也不是工作太忙,正好碰到了端午节,然后最近看天津台的爱情保卫战入迷了...太好看了,一直都是回味无穷...而且 涂磊老师话说的真是tmd的经典,然后就这样耽搁了,好了 ...

  6. Java并发之ThreadPoolExecutor 线程执行服务

    package com.thread.test.thread; import java.util.concurrent.ExecutorService; import java.util.concur ...

  7. 0013 Java学习笔记-面向对象-static、静态变量、静态方法、静态块、单例类

    static可以修饰哪些成员 成员变量---可以修饰 构造方法---不可以 方法---可以修饰 初始化块---可以修饰 内部类(包括接口.枚举)---可以修饰 总的来说:静态成员不能访问非静态成员 静 ...

  8. Nginx问题定位之监控进程异常退出

    nginx在运行过程中是否稳定,是否有异常退出过?这里总结几项平时会用到的小技巧. 1. 在error.log中查看是否有signal项,如果有,看看signal是多少. 比如,这是一个异常退出的情况 ...

  9. android中的数据存取-方式一:preference(配置)

    这种方式应该是用起来最简单的Android读写外部数据的方法了.他的用法基本上和J2SE(java.util.prefs.Preferences)中的用法一样,以一种简单. 透明的方式来保存一些用户个 ...

  10. js中正则表达式的模式匹配

    参考Javascript权威指南(第6版)第10章 1.正则表达式的定义 正则表达式有两种定义方法,通常使用直接量方式. (1)直接量 var pattern = /\d$/; var pattern ...