来自 服务器&运维 2019-12-04 16:28 的文章
当前位置: 澳门威尼斯人平台 > 服务器&运维 > 正文

jquery结合CSS使用validate实现漂亮的验证_javascript技巧_脚本之家

自己结合了在网上找的验证功能和漂亮的提示同能后做出来的验证 希望大家喜欢

这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录。现在社会坚持以人为本的理念,在网站开发过程同样如此。User是我们面对较多的对象,也是较核心的对象。最开始的用户注册和登陆这块,也就尤为重要。

一些常用的验证脚本

  鼠标悬停 - 苹果·志 - goldapple's blog   BODY { FONT-SIZE: 12px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif } { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px } A { DISPLAY: block; WIDTH: 164px; COLOR: #000000; HEIGHT: 36px; TEXT-DECORATION: none } UL { MARGIN: 200px auto; WIDTH: 632px; LIST-STYLE-TYPE: none } LI { FLOAT: left; MARGIN: 0px 20px; WIDTH: 164px; LINE-HEIGHT: 39px; POSITION: relative; HEIGHT: 36px; TEXT-ALIGN: center } LABEL { DISPLAY: none; BACKGROUND: url no-repeat 0px 0px; LEFT: -16px; WIDTH: 200px; LINE-HEIGHT: 68px; POSITION: absolute; TOP: -100px; HEIGHT: 76px } input.error{ border: 2px dashed red; }     ${ $.hover.parent.animate({opacity:"show",left:"-85px"},500);//.show{ $.find.animate({opacity:"hide",left:"-105px"},500);//.hide; $.validate({ rules: { password: { required: true, minlength: 5 }, name:{ required:true } }, messages: { password: { required: "请输入密码", minlength: jQuery.format }, name:{ required:"测试" } },success:function.remove     

用户注册和登录其实往往比我们想象的难。就比如表单校验,里面涵盖的内容其实挺多,就前台而言,你需要了解:

不会写js了,只能从网上找一些常用的验证脚本。

是不是非常漂亮呢,下伙伴们也可以按照自己的要求美化美化,希望小伙伴们能够喜欢。

1.正则表达式的基本了解

// 手机号码验证
jQuery.validator.addMethod("mobile", function(value, element) {
    var length = value.length;
    var mobile =  /^(((13[0-9]{1})|(15[0-9]{1}))+d{8})$/
    return this.optional(element) || (length == 11 && mobile.test(value));
}, "手机号码格式错误");   

其实正则并不难,并且在学会后能带给你极大的成就感,享受那种事半功倍的效果吧。

// 电话号码验证   
jQuery.validator.addMethod("phone", function(value, element) {
    var tel = /^(0[0-9]{2,3}-)?([2-9][0-9]{6,7})+(-[0-9]{1,4})?$/;
    return this.optional(element) || (tel.test(value));
}, "电话号码格式错误");

2.ajax异步请求

// 邮政编码验证   
jQuery.validator.addMethod("zipCode", function(value, element) {
    var tel = /^[0-9]{6}$/;
    return this.optional(element) || (tel.test(value));
}, "邮政编码格式错误");

在验证用户名是否存在、用户登录时账号或者密码错误时给出相应的提示。

// QQ号码验证   
jQuery.validator.addMethod("qq", function(value, element) {
    var tel = /^[1-9]d{4,9}$/;
    return this.optional(element) || (tel.test(value));
}, "qq号码格式错误");

3.一些方便的验证库,比如jQuery.validate

// IP地址验证
jQuery.validator.addMethod("ip", function(value, element) {
    var ip = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
    return this.optional(element) || (ip.test(value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256));
}, "Ip地址格式错误");

正因为如此普遍的需求和一定的复杂性,bootstrap表单和jQuery.validate表单校验等一些优秀的类库专为人们解决UI、表单校验问题。

// 字母和数字的验证
jQuery.validator.addMethod("chrnum", function(value, element) {
    var chrnum = /^([a-zA-Z0-9]+)$/;
    return this.optional(element) || (chrnum.test(value));
}, "只能输入数字和字母(字符A-Z, a-z, 0-9)");

下面就是我用bootstrap+jQuery.validate做的界面:

// 中文的验证
jQuery.validator.addMethod("chinese", function(value, element) {
    var chinese = /^[澳门威尼斯人平台,u4e00-u9fa5]+$/;
    return this.optional(element) || (chinese.test(value));
}, "只能输入中文");

一、bootstrap3基本表单和水平表单

// 下拉框验证
$.validator.addMethod("selectNone", function(value, element) {
    return value == "请选择";
}, "必须选择一项");

1、基本表单

// 字节长度验证
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个字节)"));

基本的表单结构是 Bootstrap 自带的,下面列出了创建基本表单的步骤:

本文由澳门威尼斯人平台发布于服务器&运维,转载请注明出处:jquery结合CSS使用validate实现漂亮的验证_javascript技巧_脚本之家

关键词: