简单，智能，令人愉悦的表单验证~~~

官方文档：http://www.niceue.com/validator/

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <link rel="stylesheet" href="js/validator/jquery.validator.css"/>

    <script src="js/jquery.min.js"></script>

    <script src="js/validator/jquery.validator.min.js"></script>

    <script src="js/validator/local/zh-CN.js"></script>

    <script>

        $(function(){

            $('#userform').validator({

                rules: {

                    telnumber: [/^\d{11}$/],

                    adminame:function(){

                        return $("#username").val()=="admin"||"请输入正确的用户名"

                    }

                },

                fields: {

                    username:{

                        rule:"required;adminame",

                        msg: {

                            required: "请填写用户名！"

                        }

                    },

                    usertel:{

                        rule:"required;telnumber",

                        msg: {

                            required: "请填写手机号码！",

                            telnumber:"请输入11位数字的手机号码"

                        },

                        tip:"密码由6-20位数字、字母或下划线组成！",

                        ok: "输入正确"

                    }

                },

                valid: function(form){

                    //表单验证通过，提交表单到服务器

                    alert("验证通过");

                    $.ajax({

                        url: "result.php",

                        data: $(form).serialize(),

                        success: function(d){

                            //do something

                        }

                    });

                }

            })

        })

    </script>

</head>

<body>

 <form name="userform" id="userform">

     用户名：<input type="text" name="username" id="username" placeholder="请输入用户名"/> <span class="msg-box" for="loginName"></span><br><br>

     手机号：<input type="tel" name="usertel" placeholder="请输入手机号"/><br><br>

     <button type="submit">提交</button>

 </form>

</body>

</html>

客户端的验证插件validator的更多相关文章

  1. 表单验证插件-validator.js 使用教程

    做网站的时候,常常会涉及到各种表单验证.选择一款好用的表单验证插件,会降低表单验证开发的难度.在开发中,我目前使用的表单验证插件是:validator.js. validator.js 是一款轻量的表 ...

  2. jquery插件-表单验证插件-validator对象

    三 Validator对象 1.介绍:Validate方法返回的对象称作Validator对象 2.使用 Validator对象常用方法 Validator.form() 返回:Boolean 验证: ...

  3. //解决validator验证插件多个name相同只验证第一的问题

    //解决validator验证插件多个name相同只验证第一的问题 var validatorName = function () { if ($.validator) { $.validator.p ...

  4. jQuery学习之：Validation表单验证插件

    http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每 ...

  5. aspx中的表单验证 jquery.validate.js 的使用 以及 jquery.validate相关扩展验证(Jquery表单提交验证插件)

    这一期我们先讲在aspx中使用 jquery.validate插件进行表单的验证, 关于MVC中使用 validate我们在下一期中再讲     上面是效果,下面来说使用步骤 jQuery.Valid ...

  6. 网站开发常用jQuery插件总结(四）验证插件validation

    在网站开发过程中,有时我们需要验证用户输入的信息是否符合我们的要求,所以我们会对用户提交的数据进行验证.验证分两次进行,一次是在客户端,一次是在服务端.客户端的验证可以提升用户的体验. jquery验 ...

  7. (转)强大的JQuery表单验证插件 FormValidator使用介绍

    jQuery formValidator表单验证插件是客户端表单验证插件.在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者(J ...

  8. 在SpringBoot中使用FluentValidator验证插件

    前言 在我们编写项目的时候,在controller中往往离不开对一些数据的校验.这里并不是说对于这些数据业务上面的校验,而是对这些数据进行空校验或者是长度校验等. 有些时候校验可以省略,根据业务的需要 ...

  9. 强大的JQuery表单验证插件 FormValidator使用介绍

    jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者( ...

随机推荐

  1. 《Web 前端面试指南》1、JavaScript 闭包深入浅出

    闭包是什么? 闭包是内部函数可以访问外部函数的变量.它可以访问三个作用域:首先可以访问自己的作用域(也就是定义在大括号内的变量),它也能访问外部函数的变量,和它能访问全局变量. 内部函数不仅可以访问外 ...

  2. [原] KVM 虚拟化原理探究（1）— overview

    KVM 虚拟化原理探究- overview 标签(空格分隔): KVM 写在前面的话 本文不介绍kvm和qemu的基本安装操作,希望读者具有一定的KVM实践经验.同时希望借此系列博客,能够对KVM底层 ...

  3. 首个threejs项目-前端填坑指南

    第一次使用threejs到实际项目中,开始的时候心情有点小激动,毕竟是第一次嘛,然而做着做着就感受到这玩意水好深,满满的都是坑,填都填不过来.经过老板20天惨无人道的摧残,终于小有成就. 因为第一次搞 ...

  4. Spring框架概述

    Spring是最流行的Java企业级应用开发框架,全球数以百万的开发者在使用Spring框架创建高性能.易测试.可重用的代码. Spring框架的核心特性可以应用于任何Java应用,但扩展的JavaE ...

  5. css居中div的几种常用方法

    在开发过程中,很多需求需要我们居中一个div,比如html文档流当中的一块div,比如弹出层内容部分这种脱离了文档流等.不同的情况有不同的居中方式,接下来就分享下一下几种常用的居中方式. 1.text ...

  6. Newtonsoft.Json设置类的属性不序列化

    参考页面: http://www.yuanjiaocheng.net/webapi/parameter-binding.html http://www.yuanjiaocheng.net/webapi ...

  7. MFC单文档程序添加HTML帮助支持

    1.在App类 构造函数中添加 EnableHtmlHelp(); 2.在Frame类中,添加消息影射: ON_COMMAND(ID_HELP_FINDER, CFrameWnd::OnHelpFin ...

  8. slf4j中的MDC

    slf4j中MDC是什么鬼 slf4j除了trace.debug.info.warn.error这几个日志接口外,还可以配合MDC将数据写入日志.换句话说MDC也是用来记录日志的,但它的使用方式与使用 ...

  9. BPM合同管理解决方案分享

    一.方案概述合同是组织与组织间所订协议的法律 表现形式,体现着双方对于合作在法律和道德上的承诺.然而,大多数企业的合同管理都或多或少存在合同审批过程不规范.签订草率.审批权责不清.合同执行跟踪难.合同 ...

  10. Configure a bridge interface over a VLAN tagged bonded interface

    SOLUTION VERIFIED February 5 2014 KB340153 Environment Red Hat Enterprise Linux 6 (All Versions) Red ...