HTML进行表单验证

文章目录

使用JavaScript进行表单验证
使用html5自带的特性进行验证：

使用JavaScript进行表单验证

表单样式：

<form action="" name="form_login"><input placeholder="账号" type="text" name="username" class="form_input"><br><input placeholder="密码" type="password" name="password" class="form_input" style="top: 230px"><br><input type="submit" name="submit" value="登录" class="_submit" onclick="return _submit()"><input type="reset" name="reset" value="重置" class="_reset"></form>

JavaScript代码：
使用正则表达式进行验证，将账号的所有大小写字母和数字使用空符号替代，如果全部替换完毕还有值（length>0）则证明账号中包含除数字和字母外的其他元素。

function _submit(){var username = document.form_login.username.value;//获取表单元素的值var password = document.form_login.password.value;if(username.length < 6 || username.length > 12){alert("账号的长度必须大于等于6小于等于12");return false;}if(password.length < 6 || password.length > 12){alert("密码的长度必须大于等于6小于等于12");return false;}username = username.replaceAll(new RegExp('[0-9]', 'g'), "").replaceAll(new RegExp('[a-z]', "ig"), "");//使用正则表达式进行验证，将账号的所有大小写字母和数字使用空符号替代，如果全部替换完毕还有值（length>0）则证明账号中包含除数字和字母外的其他元素。if(username.length > 0){alert("账号只能由数字和大小写字母组成");return false;}password = password.replaceAll(new RegExp('[0-9]', 'g'), "").replaceAll(new RegExp('[a-z]', "ig"), "");if(password.length > 0){alert("账号只能由数字和大小写字母组成");return false;}return true;}

使用html5自带的特性进行验证：

required输入,要求提交的值不能为空

<input type="text" name="username" required>

使用 min 和 max 属性来确保数值特定范围内。
(前提是有输入值）

<input type="text" min="6" max="12" name="username" />

或者使用pattern 进行正则表达式验证

<input type="text" id="name" name="name" pattern="^.* .*$" />

参考资料：
https://www.runoob.com/regexp/regexp-syntax.html
https://www.w3cschool.cn/html/html-css-form-input-validation.html

HTML进行表单验证相关推荐

[JAVA EE] Thymeleaf 高级用法：模板布局，带参数的引用片段，表单验证，常用校验注解
模板布局公共部分通常定义为模板布局:如页眉,页脚,公共导航栏.菜单等. 模板布局定义方法布局页中用 th:fragment 定义模板片段,其他页面用 th:insert 引用片段例如:foote ...
float js 正则验证_使用HTML和Vuejs进行表单验证
他们说大多数网络应用只是HTML表单.好吧,表单需要验证,谢天谢地,HTML5带有许多优秀的内置表单验证功能,可用于电子邮件,数字,最大值,分钟等.您甚至可以使用模式编写自己的验证规则.在本文中,我将 ...
JavaScript 表单与表单验证
JavaScript 表单 JavaScript 表单验证 HTML 表单验证可以通过 JavaScript 来完成. 以下实例代码用于判断表单字段(fname)值是否存在,如果存在,则弹出信息,否则 ...
jquery 实现表单验证功能代码(简洁)
html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>表单验证页面</title&g ...
一款比较实用齐全的jQuery 表单验证插件
一款比较实用,并且验证类型齐全的jQuery表单验证插件.英文版原作者@Vanadium,由我做中文整理.E文水平有限,如果翻译的有问题的,请大家指出,在此感谢~ 可以验证哪些? 文字,日期,邮箱,网 ...
antd 验证动态 required_3分钟短文：十年窖藏，Laravel告诉你表单验证的正确姿势
引言上一章我讲到了使用FormBuilder让后端开发者快速构建前端表单页面,而为了示例, 直接在store方法内把表单数据一股脑存到了数据库. 这!很!危!险! 本文教你正确地验证用户表单提交的数 ...
Angular响应式表单及表单验证
1. 什么是响应式表单? 响应式表单提供了一种模型驱动的方式来处理表单输入,其中的值会随时间而变化. 响应式表单使用显示的,不可变的方式,管理表单在特定时间点上的状态.对表单状态的每一次变更都会返回一 ...
Bootstrap表单验证插件bootstrapValidator使用方法整理
插件介绍先上一个图: 下载地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用方法:http://www.cnblogs.com/huangc ...
Angular 表单验证类库 ngx-validator 1.0 正式发布
背景介绍之前写了一篇 <如何优雅的使用 Angular 表单验证>,结尾处介绍了统一验证反馈的类库 ngx-validator ,由于这段时间一直在新模块做微前端以及相关业务组件库,工具 ...
如何优雅的使用 Angular 表单验证
随便说说,这一节可以跳过去年参加 ngChine 2018 杭州开发者大会的时候记得有人问我: Worktile 是什么时候开始使用 Angular 的,我说是今年(2018年) 3 月份开始在新模 ...

HTML进行表单验证

文章目录

使用JavaScript进行表单验证

使用html5自带的特性进行验证：

HTML进行表单验证相关推荐

最新文章

热门文章