文档章节

html5表单原生自定义验证的完善

gcudwork
 gcudwork
发布于 2017/08/15 10:36
字数 443
阅读 7
收藏 0

在我上篇博客https://my.oschina.net/u/3470006/blog/1505758html5表单原生自定义验证中用户名其实存在问题,用户名以拼音方式输入时会强制输入字母并突破字数限制,虽然后台再验证可以拦截非法输入,但这样的体验仍是不好的,我决定加以改进

首先,将html改成如下

            <form method="post" action="Login/Register" onsubmit="CheckUserName()">
                <input type="text" id="username" placeholder="用户名(只能是数字或字母)" maxlength="25" required autofocus
                       name="UserName" onblur="if(value!='')CheckUserName()">
                <input type="password" id="password" placeholder="密码" maxlength="25" required minlength="6"
                       name="Password" oninput="if(value.length>5)CheckPassword()"><span style="color:#23de17;"
                                                                                         id="ViewPasswordRule"
                                                                                         onclick="ShowPasswordRule()">查看密码规则</span><br>
                <button type="submit" id="Register">确认注册</button>
            </form>

用户名标配:默认的提示,最大25,必填,自动聚焦

我将检测用户名的函数改了下,改成了下面两个

function CheckUserName() {
    var UserNameBox=document.getElementById("username")
    var reg=new RegExp("^[A-Za-z0-9]+$")
    if(reg.test(UserNameBox.value)){
        UserNameBox.setCustomValidity("")
        CheckUserNameIsExits()
    }
    else{
        UserNameBox.setCustomValidity("用户名只能为字母或数字")
    }
}
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("")
        }
    })
}

在CheckUserName里加了检测是否数字或字母的正则表达式,给予“用户名只能为字母或数字”的提示,在通过此检测后再给予检测用户是否存在的检测,这个接口我还没有进行封装

检测用户名我在失去焦点和表单提交时进行了检测,if(value!="")是为了不覆盖原生必填提示

这样,用户名的前端检测已经完善,用户想要作死或小人想要破坏还是要在服务端进行再验证

© 著作权归作者所有

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

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

小卒过河
2011/07/23
4.1K
16
超级绚丽,20款前端动画特效,轰炸你的眼睛

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

浪漫程序员
2018/04/25
0
0
javascript submit()方法的坑

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

吾爱
2014/09/09
0
0
主流浏览器CSS3和HTML5兼容性详细清单

天极网软件频道2011-05-26 15:26 分享到:我要吐槽   更多精彩相关文章推荐:   常用浏览器软件HTML5兼容性表现测试   IE和Firefox浏览器CSS兼容性技巧整理   CSS hack定义技巧浏览器...

波利beryl
2014/11/12
0
0
五大主流浏览器CSS3和HTML5兼容性大比拼

本文是一份IE,Chrome,Firefox, Safari,Opera五大主流大浏览器,在 Mac 和 Windows 两个平台,对 CSS3 和 HTML5 各种特性支持情况的详细清单。 各大主流浏览器对 CSS3 和 HTML5 的支持越来...

红薯
2011/05/26
4.4K
12

没有更多内容

加载失败,请刷新页面

加载更多

HeyUI组件库按需加载功能上线,盘点HeyUI组件库有哪些独特功能?

HeyUI组件库 如果你还不了解heyui组件库,欢迎来我们的官网或者github参观。 官网 github 当然,如果能给我们一颗✨✨✨,那是最赞的了! 按需加载 当heyui组件库的组件越来越多的时候,按需...

vvpvvp
21分钟前
4
0
Dockerfile文件详解

Dockerfile文件详解 什么是dockerfile? Dockerfile是一个包含用于组合映像的命令的文本文档。可以使用在命令行中调用任何命令。 Docker通过读取Dockerfile中的指令自动生成映像。 docker bui...

Jeam_
34分钟前
0
0
阿里云PolarDB发布重大更新 支持Oracle等数据库一键迁移上云

5月21日,阿里云PolarDB发布重大更新,提供传统数据库一键迁移上云能力,可以帮助企业将线下的MySQL、PostgreSQL和Oracle等数据库轻松上云,最快数小时内迁移完成。据估算,云上成本不到传统...

zhaowei121
42分钟前
0
0
在数据数据探索过程中的一些常用操作

###pandas在做数据探索时,分组统计均值和中位数参考资料:http://www.cnblogs.com/nxld/p/6058591.htmlhttp://python.jobbole.com/85742/按字典重新赋值,可以直接使用pandas中的repla...

KYO4321
45分钟前
0
0
好程序员分享干货 弹性分布式数据集RDD

一、RDD定义 RDD(Resilient Distributed Dataset)叫做分布式数据集,是Spark中最基本的数据抽象,它代表一个不可变(数据和元数据)、可分区、里面的元素可并行计算的集合。其特点在于自动容...

好程序员IT
46分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部