分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

validator ?js验证器

发布时间:2023-09-06 02:18责任编辑:顾先生关键词:js

转自:https://github.com/jaywcjlove/validator.js

轻量级的JavaScript表单验证,字符串验证。没有依赖,支持UMD

导入js库

<script type="text/javascript" src="<%=path %>/validate/jquery-1.6.2.min.js"></script><script type="text/javascript" src="<%=path %>/validate/jquery.validate.min.js"></script>

简单.js验证

// 字符串验证var validator = require(‘validator.tool‘);var v = new validator();v.isEmail(‘wowohoo@qq.com‘);v.isIp(‘192.168.23.3‘);v.isFax(‘‘);// 表单验证var a = new validator(‘example_form‘,[ ???{...}],function(obj,evt){ ???if(obj.errors){ ???????// 判断是否错误 ???}})

表单验证:

<form id="example_form"> ???<div> ???????<label for="email">邮箱验证</label> ???????<input type="email" name="email" id="email" class="form-control" placeholder="Email"> ???</div> ???<div class="form-group"> ???????<label for="passworld">密码:</label> ???????<input type="passworld" name="passworld" id="passworld" class="form-control" placeholder="输入密码"> ???</div> ???<div class="form-group"> ???????<label for="repassworld">确认密码:</label> ???????<input type="repassworld" name="repassworld" id="repassworld" class="form-control" placeholder="输入密码"> ???</div></form><script type="text/javascript"> ?var validator = new Validator(‘example_form‘,[ ???{ ???????//name 字段 ???????name: ‘email‘, ???????display:"你输入的不{{email}}是合法邮箱|不能为空|太长|太短", ???????// 验证条件 ???????rules: ‘is_emil|max_length(12)‘ ???????// rules: ‘valid_email|required|max_length(12)|min_length(2)‘ ???},{ ?????name:"passworld", ?????display:"必填", ?????rules: ‘required‘ ???},{ ?????name:"repassworld", ?????display:"密码不一致", ?????rules: ‘same(passworld)‘ ???} ?],function(obj,evt){ ?????if(obj.errors){ ?????????// 判断是否错误 ?????} ?})</script>

说明文档:

new Validator(formName, option, callback)

forname:  是标签中<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
    • is_money -> 金额格式验证
    • is_english -> 字母验证??
    • is_chinese -> 中文验证
    • is_percent -> 验证百分比??
    • required -> 是否为必填
    • max_length -> 最大字符长度
    • min_length -> 最小字符长度
    • same(field) -> 指定字段内容是否相同
    • different(field) -> 拒绝与某个字段相等,比如登录密码与交易密码情况
    • contains(field) -> 直接判断字符串是否相等
    • accepted(field) -> 用于服务条款,是否同意时相当有用,不限制checkbox与radio,有可能submit button直接附带value情况
例如:
{ ???//name 字段 ???name: ‘email‘, ???display:"你输入的不{{email}}是合法邮箱|不能为空|太长|太短", ???// 验证条件 ???rules: ‘is_email|max_length(12)‘ ???// rules: ‘valid_email|required|max_length(12)|min_length(2)‘}

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


remote:URL 异步验证
使用ajax方式进行验证,默认会提交当前验证的值到远程地址,如果需要提交其他的值,可以使用data选项
示例一:remote: "check-email.php"示例二:remote: { ???url: "check-email.php", ????//后台处理程序 ???type: "post", ??????????????//数据发送方式 ???dataType: "json", ??????????//接受数据格式 ??????data: { ????????????????????//要传递的数据 ???????username: function() { ???????????return $("#username").val(); ???????} ???}}
自定义验证方法
addMethod(name, method, message)
// 中文字两个字节jQuery.validator.addMethod( ???"byteRangeLength", ????function(value, element, param) { ???????var length = value.length; ???????for(var i = 0; i < value.length; i++){ ???????????if(value.charCodeAt(i) > 127){ ???????????????length++; ???????????} ???????} ???????return this.optional(element) || (length >= param[0] && length <= param[1]); ??????}, ????$.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));// 邮政编码验证 ??jQuery.validator.addMethod("isZipCode", function(value, element) { ??????var tel = /^[0-9]{6}$/; ???return this.optional(element) || (tel.test(value));}, "请正确填写您的邮政编码");




默认规则:
(1)、required:true ??????????????必输字段(2)、remote:"remote-valid.jsp" ??使用ajax方法调用remote-valid.jsp验证输入值(3)、email:true ?????????????????必须输入正确格式的电子邮件(4)、url:true ???????????????????必须输入正确格式的网址(5)、date:true ??????????????????必须输入正确格式的日期,日期校验ie6出错,慎用(6)、dateISO:true ???????????????必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性(7)、number:true ????????????????必须输入合法的数字(负数,小数)(8)、digits:true ????????????????必须输入整数(9)、creditcard:true ????????????必须输入合法的信用卡号(10)、equalTo:"#password" ???????输入值必须和#password相同(11)、accept: ???????????????????输入拥有合法后缀名的字符串(上传文件的后缀)(12)、maxlength:5 ???????????????输入长度最多是5的字符串(汉字算一个字符)(13)、minlength:10 ??????????????输入长度最小是10的字符串(汉字算一个字符)(14)、rangelength:[5,10] ????????输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)(15)、range:[5,10] ??????????????输入值必须介于 5 和 10 之间(16)、max:5 ?????????????????????输入值不能大于5(17)、min:10 ????????????????????输入值不能小于10

转自  https://www.cnblogs.com/linjiqin/p/3431835.html

validator ?js验证器

原文地址:https://www.cnblogs.com/scmath/p/9818631.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved