zoukankan      html  css  js  c++  java
  • jQuery 页面校验

    表单验证

    使用方法:

    第一步:在页底引入js http://st.beisen.com/common/validor.js(基于jquery的组件,因此保证已经引入了jquery库文件 第二步:提交验证 $("#form_v").validate(); (form_v为form的id) 第三步:验证规则对接方式 以class形式与input等项对应关联, 1:<input type="text" class="text required"/>为验证必填 2:class="text {required:true,minlength:5,equalTo:'#email',accept:'com'}" 必填,最小长度为5,值必须以id为email的对象value值一致,必须以com结尾 第三步:验证项说明 required: "必填", remote: "修正验证,一般值为一个link,比如一个验证用户名唯一的ajax页面", email: "邮箱格式", url: "网址格式", number: "数字格式", digits: "整数格式", accept: "拥有合法后缀名的字符串", equalTo: "相同值验证,用于验证密码", maxlength: "字符串长度上限", minlength: "字符串长度下限", rangelength: "字符串长度区间", range: "字符串大小上限", specialchar: "不能输入特殊字符",(new) max: "字符串最大值", min: "字符串最小值", 第四步:扩展方式 jQuery.validator.addMethod("isZipCode", function(value, element) { var tel = /^[0-9]{6}$/; return this.optional(element) || (tel.test(value)); }, "请正确填写您的邮政编码"); 在对应的input上的class里添加isZipCode即可 第五步:修改默认提示信息 {messages:{remote:'用户名已存在'}} 可以设置不同验证下同一输入框的反馈信息 特殊说明:remote remote值为一个程序验证页面,只需返回ture或false即可,下面例子中请输入admin1验证
    • <input type="text" class="text uname {required:true,messages:{remote:'用户名已存在'}}" remote="i/u.asp" name="uname" id="uname" />
    • <input type="text" class="text required email" name="email" id="email" />
    • <input type="text" class="text {required:true,minlength:5,equalTo:'#email',accept:'com'}" name="email2" />
    • <input type="text" class="required digits" name="digits" />
    • <input type="text" class="text required" name="requ" />
    • <input type="text" class="text required url" name="url" />
    • <input type="text" class="text require isZipCode" name="zipcode" />
    • <input type="text" class="text {range:[13,23],min:15}" name="myage" />
    • <textarea name="desc" id="desc" cols="40" rows="3" class="required" style="300px"></textarea>
    • <select class="required">……………………</select>
    • <div class="InputGroup">
      <input type="checkbox" name="formwhere" class="checkbox required" /><label class="labelright">报纸</label>
      <input type="checkbox" name="formwhere" class="checkbox required" /><label class="labelright">电视</label>
      <input type="checkbox" name="formwhere" class="checkbox required" /><label class="labelright">网络</label>
      </div>
    • <input type="radio" name="sex" class="checkbox required" /><label class="labelright">男</label>
      <input type="radio" name="sex" class="checkbox required" /><label class="labelright">女</label>
      <input type="radio" name="sex" class="checkbox required" /><label class="labelright">保密</label>
  • 相关阅读:
    CSS 使用技巧
    CSS display
    CSS float
    .NET自动识别HttpWebResponse的编码及是否压缩
    通用权限管理系统基类中数据库的连接
    通用权限底层实现的记录软删除及表中应包含的基本字段
    最好用的兼容多种数据库通用高效的大数据分页功能
    水平权限漏洞的修复方案
    通用权限管理系统菜单展示的一个技巧
    IE11下用forms身份验证的问题
  • 原文地址:https://www.cnblogs.com/a311300/p/1793833.html
Copyright © 2011-2022 走看看