表单校验

最新推荐文章于 2023-11-26 16:30:52 发布

十一．

最新推荐文章于 2023-11-26 16:30:52 发布

阅读量163

点赞数

本文链接：https://blog.csdn.net/weixin_44794676/article/details/94314350

版权

表单校验

1. 掌握表单验证的实现流程

1.1 表单验证的作用

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

1.2 表单验证的实现思路

**1.程序的入口：**事件（表单提交事件onsubmit,失去焦点事件onblur，普通按钮的点击事件onclick，获取焦点事件onfocus，键盘录入事件onkeydown）

2.程序主体：（表单验证的实现思路（4步））

获取表单数据（表单的内容是存储在一个value属性中的）
利用字符串等相关方法进行数据验证
通过alert（）或者其他的提示方式进行提醒（一般提醒会放在表单元素的右侧或者下侧）

如果是提交事件注意应该将提交拦截！

<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（）获取指定索引的字符

2. 【了解】表单过滤选择器

3. 掌握正则表达式的基本使用

会写基本的正则表达式

会看基本的正则表达式

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

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

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

简单模式的表达式var reg = /abc/; 判断是否包含abc
复合模式的表达式var reg = /[a-z]{6-16}/; 它可以匹配上6-16位的小a-小z
- 元字符例如：[a-z]
- 限定符例如：{6，16}

在这里插入图片描述

附加参数：

g： global 全局它对很多方法产生不同的影响

字符串的replace方法如果正则不加g则表示只替换一次

i：ignorecase 忽略大小写

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

常用方法：

正则对象的方法：

exec（）查找匹配的字符串并返回其位置
test（）验证字符串是否和正则匹配默认为true

字符串的方法：

match（）查找一个或多个与正则匹配的内容
search（）查找与正则匹配的内容

search()方法不执行全局匹配，它将忽略标志 g，并且总是从字符串的开始进行检索，这意味着它总是返回调用者的第一个匹配的位置。如果找不到返回-1。
replace（）替换与正则匹配的内容
split（）根据正则切割字符串切割为数组

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

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

4. 掌握H5的表单验证特性

4.1 H5的表单新属性

required 表示此表单为必填项
dplaceholder 它会在表单内展示一个提示内容
pattern 和正则结合使用
max 最大值
min 最小值

4.2 H5提出来的DOM验证操作

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

在这里插入图片描述

// 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. 了解一些前端的常见插件

validate：

highcharts

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

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

…

十一．

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
表单校验

表单校验1. 掌握表单验证的实现流程1.1 表单验证的作用保证用户输入的内容符合我们项目的要求降低服务器的压力提升用户的体验1.2 表单验证的实现思路**1.程序的入口：**事件（表单提交事件onsubmit,失去焦点事件onblur，普通按钮的点击事件onclick，获取焦点事件onfocus，键盘录入事件onkeydown）2.程序主体：（表单验证的实现思路（4步））...
复制链接

扫一扫