JQuery中内容操作函数、validation表单校验

JQuery:
内容体拼接(可以直接拼接元素节点和内容节点)
  JQuery实现:
    方案1:A.append(B); == B.appendTo(A);A的后面拼接B
    方案2: A.prepend(B); == B.prependTo(A);A文本的最前面插入B
  text()与html()比较:
    1.相同点:
      都可以设置或获取内容
    2.不同点:
      获取时,html()获取的是所有内容体:标签+文本
      text()获取的只是文本
      设置时,如果设置的内容有html()标签
      html()设置的内容可以被浏览器当做标签解析
      text()设置的所有内容都被当成了普通文本
    3.二者用于场景
      JS一般使用html()函数
      类似于text()的实现一般用于xml解析
    val():对表单中的value值进行操作
  事件简化:hover()
    d1.hover(
      function(){t1.val("第一个是移入事件")},
      function(){t1.val("第二个是移出事件")}
    );

validation是对表单校验的封装,是一个第三方的JQuery的插件,使用的时候先导入JQuery包(JQuery是一个插座)
表单校验中涉及两个要素:规则和提示信息
  &(function(){
    //定位表单,调用方法validate()进行校验
    $("#id").validate({
      //规则,注意大括号和分号的使用
      rules:{
        //通过name属性值定位标签节点
        username:{
          //属性:属性值, 注意逗号,用逗号分隔,结尾处不用
          required:true, //必填
          rangelength:[6,10] //字符长度
        }
      },
      //提示信息
      messages:{
        username:{
          required:"这是必填项",
          rangelength:"长度必须在6~10个字符之间"
        }
      }
    });
  });
其它校验器:
  email:{
    email:true //必须符合邮箱格式
  },
  birthday:{
    date:true, //必须符合日期格式
    number:true, //必须是数字
    min:1000, //最小值
    range:[6,16], //必须是在这之间的数字
  },
  pwd:{
    required:true
  },
  repwd:{
    required:true,
    equalTo:"input[name=‘pwd‘]" //值必须和名字为pwd的input标签的value值相等
  }

自定义校验类型:
   1.编写校验类型
      $.validator.addMethod(参数1,参数2,参数3);
        参数1:该校验类型的名字
        参数2:该校验类型的具体实现
        参数3:错误提示
   2.参数2详解,参数2返回一个boolean的值,返回false执行错误提示(参数3)
      function(参数1,参数2,参数3)
        参数1 ----- 客户录入的值
        参数2 ----- 输入项对应的对象
        参数3 ----- 使用校验类型时,校验类型的取值
   $.validator.addMethod("my",function(v,e,p){
      //根据客户录入的数据进行校验,判断是不是合法的,如果合法,返回 true,否则返回 false
      //判断 v 中是不是有敏感词(pujing)
      if(v.indexOf("pujing") != -1){//有pujing
        return false;
      }
      return true;
    },"不能出现政治敏感词");
    $(function(){
      $("#f1").validate({
        rules:{
          username:{
            my:true
          }
        }
      });
    });

validation插件设置错误信息时的原理:(查看元素的方法:在网页中查看)
  内置的错误提示,格式:
    <label id="" class="error" for="对应输入项的name值">提示信息</lable>
    看见内置的格式之后通过格式定位标签元素改变其属性等,在css代码中修饰元素,在js中动态处理元素
    通过标签名得到元素: lable (标签名选择器)
    通过class名得到元素: .error (class选择器)
  拓展:
    怎么让错误提示换行
    错误提示是默认生成的,紧跟在相应的input后面
    在相应的位置,自己添加标签 <label class="error" for="name值"></lable>自己添加之后系统不会自己添加

  内置了一些错误提示,使用时,不需要编写messages部分即可得到默认的
  国际化:
    相同软件显示不同的语言,内置语言包实现,dist文件中
    <script type="text/javascript" src="../js/messages_es_PE.js" ></script>

可以自己在html中提供校验:
  1.在script中得到表单并提供校验方法,没有具体实现,自己在html中通过通过class提供具体的校验器,要改提示信息同样通过选择器定位lable标签
    <input type="text" name="pwd" class="required number" />
  2.直接在要校验的标准中内置validation的属性和属性值:
    <input type="text" name="username" required="true" minlength="2" maxlength="8" />
  3.因为内置属性不是html自己的属性,所以提供自定义标签标记
    <input type="text" name="username" data-rule-required="true" data-rule-minlength="2" data-rule-maxlength="8" />

时间: 2024-10-12 14:28:57

JQuery中内容操作函数、validation表单校验的相关文章

jquery中使用$(#form).submit()提交表单无效原因分析及解决Script

今天写了一个表单验证,验证的时候没有任何问题,但是页面提交不了,很诡异,然后各种百度,查了一下的原因是input的id不能为submit 注意:提交表单的时候,input的id不能为submit <dl> <dd> <label>角色名称:</label> <input type="text" id="role_name" name="name" style="text-indent

jquery.validate使用攻略(表单校验)

目录 jquery.validate使用攻略1 第一章 jquery.validate使用攻略1 第二章 jQuery.validate.js API7 Custom selectors7 Utilities8 Validator8 List of built-in Validation methods9 validate ()的可选项11 debug:进行调试模式11 第三章 自定义jquery-validate的验证行为23 第四章 自定义错误消息的显示方式25 第五章 一些常用的验证脚本2

jeecg中vaildfrom的复杂的表单校验

简介 jeecg生成的页面都是使用validfrom组件来确保数据的完整性和准确性. 凡要验证格式的元素均需绑定datatype属性,datatype可选值内置有10类,用来指定不同的验证格式. 如果还不能满足您的验证需求,可以传入自定义datatype,自定义datatype是一个非常强大的功能,通过它可以满足你的任何需求. 可以绑定的附加属性有:datatype.nullmsg.sucmsg.errormsg.ignore.recheck.tip.altercss.ajaxurl 和 plu

Spring Validation 表单校验

最近开发一个项目,发现字段校验比较多,同事提出使用Validation校验能更方便一些,今天记录下来,供以后参考: 一.在pom.xml中添加依赖: <dependency> <groupId>javax.validation</groupId> <artifactId>validation-api</artifactId> <version>1.0.0.GA</version> </dependency> &

创建通用的表单校验逻辑库

表单校验一直是web开发中最基础,也是最不好做的一个环节.说是基础,相信多少从事web开发的人第一件事就是学习如果基于js.jQuery实现表单验证工作.在10年前,甚至是5年前,JavaScript还是被多数工程师轻视的一门语言,那时候很多人认为JavaScript充其量也就能完成一部分表单校验的工作.由此可知表单校验是多么基础的一件事情:说它不好做,是因为表单校验往往工作量极大,可以说是一个没太大技术含量但是很耗费体力的活,而且在一些对交互友好性要求较高的项目中,表单校验就更加费事了. 于是

【JAVAWEB学习笔记】28_jqueryAjax:json数据结构、jquery的ajax操作和表单校验插件

Ajax-jqueryAjax 今天内容: 1.json数据结构(重点) 2.jquery的ajax操作(重点) 3.jquery的插件使用   一.json数据结构 1.什么是json JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯.这些特性使JSON成 为理想的数据交换语言.易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络

jQuery学习之:Validation表单验证插件

http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每个人都能够有所掌握,慢慢会用.于是,自己便开始学习…… 由于Struts2自己早就学过,因而不需要花多少时间.而AJAX之前没怎么用过.现在AJAX框架如此之多,选择哪一个呢?开始打算选择 dojo,但是看了一点后,发现蛮复杂的.在之前有学过一点点jQuery,而网上也说jQuery很强大而且很容易

RxAndroid中observable的基本使用和表单校验操作

RxAndroid 响应式编程 类似于监听-观察者模式 在观察者模式中,你的对象需要实现 RxJava 中的两个关键接口:Observable 和 Observer.当 Observable 的状态改变时,所有的订阅它的 Observer 对象都会被通知. 在 Observable 接口的众多方法中,调用 subscribe() 让 Observer 开始订阅该Observable. 从这时起,Observer 接口有三个方法是 Observable 调用时需要的: onNext(T value

使用jQuery的validation插件实现表单校验

前端表单校验: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表单校验(使用validation插件实现)</title> 6 <script src="../jslib/jquery-1.11.0.js"></script> 7 <