四十一 表单校验

四十一章 — 表单校验

一、掌握表单验证的实现流程

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>

3.掌握字符串的常用方法

  • trim :去除左右两边的空格
  • blur:失去焦点事件
  • indexOf:获取返回字符串(指定字符)的索引 如果为-1 则不正确
  • lastIndexOf()获取指定字符最后
  • length 属性 获取字符串长度
  • charAt 获取指定索引的字符
  • break结束

二、了解表单过滤选择器

三、掌握正则表达式的基本使用

会写/看基本的正则表达式

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

语法:

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

表达式分类和组成:

  • 简单模式的表达式 var reg = /abc/g;(验证是否包含abc g是附加参数 可表示为替换全局)

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

    • 元字符 例如:[a-z] \d \s \w
      四十一 表单校验_第1张图片
  • 限定符 例如:{6,16}
    四十一 表单校验_第2张图片

/^\w+@\w+(\.[a-zA-Z]{2,3}{1,2}$/;)

[a-zA-Z]{2,3}{1,2}  + 匹配一次或多次
@ 在字符串中必然出现@

附加参数:

g:global 全局 他对不同的方法产生不同的影响;

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

i :ignorecase 忽略大小写

m :multiline 多行匹配 m往往和g搭配使用

常用正则相关方法:

正则对象的方法:

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

字符串的方法:

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

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

    search()方法不执行全局匹配,他将忽略标志g ,并且字符串

  • replace() 替换预正则陪陪的内容

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

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

  • https://www.sojson.com/regex/generate
  • http://tool.oschina.net/regex/
  • 百度搜索:
    • …最全的常用正则表达式…
    • 正则大全…
    • 2019最新正则…

四、掌握H5的表单验证特性

小图标 阿里巴巴图标库

1.H5的表单新属性

  • required表示此表单为必填项

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

  • pattern 和正则结合使用

  • max 最大值

  • min 最小值

  • maxlength

  • type = ”number“

2.H5提供出来的DOM操作

validaty:验证

var validateState(验证状态对象) = DOM对象.validity;
validateState.valueMissing
validateState.typeMismatch

可以借助下防属性验证当前表单元素的验证状态,根据此状态可以去自定义操作。自定义提示信息
DOM对象.setCustomValidaty(自定义提示信息);

四十一 表单校验_第3张图片四十一 表单校验_第4张图片四十一 表单校验_第5张图片

// 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("");
    }

});

五、了解前端的常用插件

validate:

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

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

你可能感兴趣的:(四十一 表单校验)