文档章节

html5表单原生自定义验证

gcudwork
 gcudwork
发布于 2017/08/10 11:47
字数 834
阅读 26
收藏 0

这段时间在重构自己以前做的项目,在做到注册时花了不少时间,原先是打算做用户名,密码,确认密码,邮箱,手机这几个选项,但写了半天后测试发现有不少问题,就干脆删繁就简,只留下了用户名和密码两项

按照设定,用户名要做唯一性检测,只能数字或字母,最大25位,密码则有很多条规则:
1密码位数在6到25之间
2密码不能是用户名或反转的用户名
3密码不能是纯字母或纯数字
4密码不能包含特殊符号
5密码不能为简单密码,如abc123
6严格区分大小写

首先是用户名的验证,不要看这个格式,这是编辑器格式化后的

<input type="text" id="username" placeholder="用户名(只能是数字或字母)" maxlength="25" required autofocus
                       name="UserName" oninput="value=value.replace(/[^\w\.\/]/ig,'')" onblur="CheckUserNameIsExits()">


在placeholder里提示只能数字或字母,maxlength给予25位限制,require必填项,autofoucus自动聚焦到用户名,检测输入事件,用正则表达式将不符合的值替换掉

然后是请求检测用户名是否存在的接口,在失去焦点时调用CheckUserNameIsExits的js方法

function CheckUserNameIsExits() {
    $.get("Index/Index/CheckUserIsExitsByUserName", {UserName: document.getElementById("username").value}, function (a) {
        var UserNameBox = document.getElementById("username")
        if (a === true) {
            UserNameBox.setCustomValidity("该用户已存在")
        } else {
            UserNameBox.setCustomValidity("")
        }
    })
}


由于项目没有使用bootstrap,也没有使用任何验证插件,再加上自己不想造轮子,于是采用了html5自带的表单验证,自带的虽然谈不上多好看,但也能接受

setCustomValidity可用来显示自定义的错误信息,同时会自动阻止表单提交,当信息为空时被视为通过验证,注意,setCustomValidity不能使用jquery的元素选择器获得的元素触发,似乎只能使用document获取元素触发

由于我在前面已加载了jquery,可以直接使用get的ajax提交,如果没有就自己写又臭又长的ajax提交吧

接下来是密码的验证

<input type="password" id="password" placeholder="密码" maxlength="25" required minlength="6"
                       name="Password" oninput="if(value.length>5)CheckPassword()">


同样的我给了最小最大长度限制,在输入值长度大于5时才调用CheckPassword进行检测

function CheckPassword() {
    var password=document.getElementById("password").value
    if(password.length>5){
        if (CheckSimplePassword(password, document.getElementById("username").value)) {
            document.getElementById("password").setCustomValidity("")
        }
        else {
            document.getElementById("password").setCustomValidity("密码格式不正确")
        }
    }
}


由于密码验证复杂了些,我再度进行了封装

function CheckSimplePassword(Password, UserName) {
    if (Password == UserName || Password == UserName.split("").reverse().join("")||/^\d+$/.test(Password)||/^[a-z]+$/i.test(Password)||!/^[A-Za-z0-9]+$/.test(Password)) {
        return false;
    }
    var String = ["abc123", "123abc", "password1", "1qaz2wsx", "qq123456", "1q2w3e4r", "123456abc", "abcd1234", "1234qwer", "123456789a", "aa123456",
        "123456aa","asd123456","code8925","ms0083jxj","123456qq","asdf1234","q1w2e3r4","12345678a","woaini1314","1234abcd","123qweasd","1qazxsw2",
        "kingcom5","zxcvbnm123", "1q2w3e4r5t"]
    if (String.indexOf(Password.toLowerCase()) > -1) {
        return false
    }
    return true
}

UserName.split("").reverse().join("")是用户名反转相同检测,/^\d+$/.test(Password)数字检测,/^[a-z]+$/i.test(Password)字母检测,!/^[A-Za-z0-9]+$/.test(Password)非字母数字检测,然后是检测弱密码,由于弱密码形式太多,只能手写数组

就这样html5原生表单检测完成了,当然前端检测只能防君子,防不住小人,安全要求略高的必须还要在后端对用户提交的值进行检测,然而这就不是本文该说的范畴了

© 著作权归作者所有

gcudwork
粉丝 0
博文 19
码字总数 8433
作品 0
武汉
程序员
私信 提问
全新改进的 HTML5 表单创建

经历了12年之久,万维网的核心语言(HTML或超文本标记语言)终于迎来了HTML5主要修订版本。虽然万众期待的版本仍处于测试阶段并且没有宣布正式推出的日期,HTML5的网页设计师和程序员已经就有...

小卒过河
2011/07/23
4.2K
16
javascript submit()方法的坑

这个我觉得是个坑,因为玩多了jquery,只要通过on方法绑定了submit事件处理,在任何地方提交表单都可以触发。而原生javascript的onsubmit事件是绑定在"submit按钮"上的,外部按钮执行的提交无...

吾爱
2014/09/09
1K
0
HTML5编程之旅 第4站 Forms

涉及到Web开发的,肯定要涉及到HTML表单,本节将带你走入HTML5表单的世界。 一、HTML5 Forms概述 熟悉HTML表单的开发人士,可以很容易的适应HTML5 Forms的新增功能。 XFomrs是一个以XML为核心...

倪伟伟
2014/02/27
251
1
超级绚丽,20款前端动画特效,轰炸你的眼睛

前言 HTML5一个相当出色的web技术,它不仅可以让你更加方便地操纵页面元素,而且可以通过canvas实现更多的动画特效,引进HTML5标准后,CSS3也就可以发挥更大的作用。本文主要介绍了一些基于H...

浪漫程序员
2018/04/25
0
0
分享28本关于HTML5的学习书籍(免费下载)

分享28本关于HTML5的学习书籍(免费下载) 1、用HTML5新特性开发移动App 2、用HTML5CSS3实现媲美原生应用的交互体验 3、改善HTML5网页性能-译 4、WEB_HTML5在LBS社区中的应用 5、WebQQ_3.0:...

邓剑彬
2012/11/30
1K
6

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 我,小小编辑,食人族酋长

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @宇辰OSC :分享娃娃的单曲《飘洋过海来看你》: #今日歌曲推荐# 《飘洋过海来看你》- 娃娃 手机党少年们想听歌,请使劲儿戳(这里) @宇辰OSC...

小小编辑
58分钟前
121
7
spring cloud

一、从面试题入手 1.1、什么事微服务 1.2、微服务之间如何独立通讯的 1.3、springCloud和Dubbo有哪些区别 1.通信机制:DUbbo基于RPC远程过程调用;微服务cloud基于http restFUL API 1.4、spr...

榴莲黑芝麻糊
今天
2
0
Executor线程池原理与源码解读

线程池为线程生命周期的开销和资源不足问题提供了解决方 案。通过对多个任务重用线程,线程创建的开销被分摊到了多个任务上。 线程实现方式 Thread、Runnable、Callable //实现Runnable接口的...

小强的进阶之路
昨天
6
0
maven 环境隔离

解决问题 即 在 resource 文件夹下面 ,新增对应的资源配置文件夹,对应 开发,测试,生产的不同的配置内容 <resources> <resource> <directory>src/main/resources.${deplo......

之渊
昨天
8
0
详解箭头函数和普通函数的区别以及箭头函数的注意事项、不适用场景

箭头函数是ES6的API,相信很多人都知道,因为其语法上相对于普通函数更简洁,深受大家的喜爱。就是这种我们日常开发中一直在使用的API,大部分同学却对它的了解程度还是不够深... 普通函数和...

OBKoro1
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部