jQuery表单校验

jQuery表单校验

一. 表单验证的实现流程

1.1 表单验证的作用

  • 保证用户输入的内容符合我们项目的要求
  • 降低服务器的压力
  • 提升用户的体验

1.2 表单验证的实现思路

  1. 程序的入口:事件(表单提交事件onsubmit,失去焦点事件onblur,普通按钮的点击事件onclick,获取焦点事件onfocus,键盘录入事件onkeydown)
  2. 程序主体:
    1. 获取表单数据 (表单的内容是存储在一个value属性中的)
    2. 利用字符串等相关方法进行数据验证
    3. 通过alert()或者其他的提示方式进行提醒(一般提醒会放在表单元素的右侧或者下侧)
    4. 如果是提交事件注意应该将提交拦截!
<body>
    <form action="success.html" method="GET">
        <p>
            帐号: <input type="text" id="" name="username" value="" />
        p>
        <p>
            密码: <input type="password" name="password"  />
        p>
        <input type="submit" value="提交"/>
    form>

    <script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8">script>
    <script type="text/javascript">

        // 1.绑定事件
        // 提交事件是属于表单form的一个事件
        $("form").submit(function(){
            // alert(1);
            // 2.获取数据
            var username = $("input[name=username]").val();
            // alert(username);
            // 3.利用字符串等相关方法进行验证
            if(username == null || username == ""){
                alert("用户名不能为空!");
                // 默认返回true 表示提交表单
                return false;
            }

            return true;
        });

    script>
body>

1.3 字符串的常用表单验证方法

  • trim() 去除两侧空格
  • indexOf() 获取指定字符的索引
  • lastIndexOf() 获取指定字符的最后的索引
  • length 属性 获取字符串的长度
  • charAt() 获取指定索引的字符

二、表单选择器

jQuery表单校验_第1张图片
jQuery表单校验_第2张图片
jQuery表单校验_第3张图片

三. 正则表达式的基本使用

正则表达式(regular expression)描述了一种字符串匹配的模式(pattern),可以用来检查一个字符串是否含有某种子串、将匹配的子串替换或者从某个字符串中取出符合条件的子串等。使用正则表达式可以用简洁的代码搞定复杂且严谨的验证。

语法:
// 普通方式定义
var reg = /正则的表达式/[附加参数];
// 通过对象的构造来定义
var reg = new RegExp(正则表达式[,附加参数]);

**表达式分类和组成:**复合模式和简单模式可以混用

  • 简单模式的表达式 var reg = /abc/;

  • 复合模式的表达式 var reg = /[a-z]{6,16}/; 它可以匹配上6-16位的小a-小z

    • 元字符 例如:[a-z] \d \s \w

jQuery表单校验_第4张图片

- 限定符 例如:{6,16}

jQuery表单校验_第5张图片

附加参数:

g(global 全局) 它对不同方法产生不同的影响

  • 字符串的replace方法 如果正则不加g则表示只替换一次 如果加了g表示全局匹配替换

i(ignorecase) 忽略大小写

m(multiline) 多行匹配 m往往要和g搭配使用

常用正则相关方法

正则对象的方法:

  • exec() 查找匹配的字符串 并返回其位置
  • test() 验证字符串是否和正则匹配

字符串的方法:

  • match() 查找一个或多个与正则匹配的内容

  • search() 查找与正则匹配的内容

    search()方法不执行全局匹配,它将忽略标志 g,并且总是从字符串的开始进行检索,这意味着它总是返回调用者的第一个匹配的位置。如果找不到返回-1。

  • replace() 替换与正则匹配的内容

  • split() 根据正则进行切割字符串 切割为数组

以后正则表达式可以前往:

  • https://www.sojson.com/regex/generate
  • http://tool.oschina.net/regex/
  • 百度搜索等

四. H5的表单验证特性

4.1 H5的表单新属性

  • required 表示此表单为必填项

  • placeholder 它会在表单内展示一个提示内容

  • pattern 和正则结合使用

  • max 最大值

  • min 最小值

  • maxLength

  • type=“number”

  • type=“email”

4.2 H5提供出来的DOM验证操作

var validateState(验证状态对象) = DOM对象.validity; 
validateState.valueMissing
validateState.typeMismatch
我们可以借助下方的这些属性验证当前表单元素的验证状态,根据此状态可以去进行自定义操作。(自定义提示信息)
DOM对象.setCustomValidity(自定义提示信息);

jQuery表单校验_第6张图片

jQuery表单校验_第7张图片

jQuery表单校验_第8张图片

// DOM对象属性和函数
$("input[type=submit]").click(function(){

    // alert(1);
    var emailEle = $("input[name=email]")[0];
    // 通过validity属性验证是否合法
    if(emailEle.validity.valueMissing){
        emailEle.setCustomValidity("邮箱不能为空!");
    }else if(emailEle.validity.patternMismatch){
        emailEle.setCustomValidity("邮箱格式非法!");
    }else{
        emailEle.setCustomValidity("");
    }

});

5. jQuery的常用插件

通过插件的是用可以达到事半功倍的效果,除非你非得自己写一个样式。通常我们会去一下几个网站获取jQuery插件。

jQuery:jQuery插件

highcharts:https://www.highcharts.com.cn/demo/highcharts

echarts:https://echarts.baidu.com/examples/index.html?theme=light

bootstrap:https://www.bootcss.com/

你可能感兴趣的:(jQuery)