JS 表单
时间:2020-05-16
本文章向大家介绍JS 表单,主要包括JS 表单使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
JS 的表单提交
涉及到的都是前端的知识:HTML、CSS、JavaScript 等
项目需求:
- 用户名不能为空;
- 用户名必须在6-14位之间;
- 用户名只能有数字和字母组成,不能含有其它符号(正则表达式);
- 密码和确认密码一致,邮箱地址合法;
- 统一失去焦点验证;
- 错误提示信息统一在span标签中提示,并且要求字体12号,红色;
- 文本框再次获得焦点后,清空错误提示信息,如果文本框中数据不合法要求清空文本框的value;
- 最终表单中所有项均合法方可提交
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单验证</title>
<!-- 设置 span 样式 -->
<style type="text/css">
span{
font-size: 12px;
color: red;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
// 获取用户名 span 对象
var usernameSpan = document.getElementById("usernameError");
// 给用户名文本框绑定 blur 事件
document.getElementById("username").onblur=function(){
// 获取用户名对象
var username = document.getElementById("username").value;
// 去除前后空白
username = username.trim();
// if(username.length == 0)
// if(username === "")
if(username){ // 程序到这代表username不是空字符串
if(username.length >= 6 && username.length <= 14){ // 继续判断长度 6-14 个长度
// 继续判断用户名是否包含特殊字符
var regExp = /^[A-Za-z0-9]+$/;
var flag = regExp.test(username);
if(flag){
// 用户名最终合法,什么也不做
}else{
usernameSpan.innerText = "用户名只能由数字、字母组成,不能含有其他符号!"
}
}else{
usernameSpan.innerText = "用户名长度必须在 6 - 14 之间!"
}
}else{
usernameSpan.innerText = "用户名不能为空!"
}
}
// 给用户名文本框绑定 focus 事件
document.getElementById("username").onfocus = function(){
// 清空非法的username
if(usernameSpan.innerText != ""){
document.getElementById("username").value = "";
}
// 清空span
usernameSpan.innerText = "";
}
// 获取确认密码的 span 标签
var passwordErrorSpan = document.getElementById("repasswordError")
// 获取确认密码框对象
var queRenMiMa = document.getElementById("repwd");
// 获取密码框对象
var miMa = document.getElementById("pwd");
// 确认密码绑定 blur 事件
queRenMiMa.onblur = function(){
if(queRenMiMa.value != miMa.value){
passwordErrorSpan.innerText = "密码不一致,请重新输入!"
}
}
// 确认密码绑定 focus 事件
document.getElementById("repwd").onfocus = function(){
// 清空不一致的密码和确认密码
if(passwordErrorSpan.innerText != ""){
// 清空 span
passwordErrorSpan.innerText = "";
// 清空密码
miMa.value = "";
// 清空确认密码
queRenMiMa.value = "";
}
}
/* 检查邮箱是否合法 */
// 获取邮箱文本框对象
var emailObject = document.getElementById("email");
// 创建邮箱正则表达式
var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
// 获取邮箱span对象
var emailSpan = document.getElementById("emialError");
// 邮箱文本框绑定 blur 事件
emailObject.onblur = function(){
var emailFlag = emailRegExp.test(emailObject.value);
if(!emailFlag){
emailSpan.innerText = "邮箱不合法!";
}
}
// 邮箱文本框绑定 focus 事件
document.getElementById("email").onfocus = function(){
// 清空不合法的邮箱
if(emailSpan.innerText != ""){
// 清空邮箱
emailObject.value = "";
}
// 清空 span
emailSpan.innerText = "";
}
// 获取表单对象
var submitBtnElt = document.getElementById("submitButton");
// 给提交按钮绑定click事件
submitBtnElt.onclick = function(){
// 当所有表单项都合法时,提交表单
/*
触发所有表单对象的 blur 事件,如果都合法则最终合法
不需要手动触发事件,让程序(JS代码)触发事件
*/
document.getElementById("username").focus();
document.getElementById("username").blur();
/* document.getElementById("pwd").focus();
document.getElementById("pwd").blur(); */
document.getElementById("repwd").focus();
document.getElementById("repwd").blur();
document.getElementById("email").focus();
document.getElementById("email").blur();
var formElt = document.getElementById("myform");
// 提交表单方法
// 也可以在这里设置action属性
if(usernameSpan.innerText == "" && passwordErrorSpan.innerText == ""
&& emailSpan.innerText == ""){
formElt.submit();
}
}
}
</script>
<!-- 表单 (提交应该使用 post 方式,而不是 get)-->
<form action="localhost:8080/oa/save" method="get" id="myform">
<table align="left">
<tr align="center">
<td>用户名</td>
<td>
<input type="text" name="username" id="username" />
<span id="usernameError"></span>
</td>
</tr>
<tr align="center">
<td>密码</td>
<td>
<!-- 这里为了测试写成 text,正常写成 password -->
<input type="text" name="password" id="pwd" />
<span id="passwordError"></span>
</td>
</tr>
<tr align="center">
<td>确认密码</td>
<td>
<input type="text" id="repwd" />
<span id="repasswordError"></span>
</td>
</tr>
<tr align="center">
<td>邮箱</td>
<td>
<input type="text" name="email" id="email" />
<span id="emialError"></span>
</td>
</tr>
</table>
<br><br><br><br><br><br>
<!-- <input type="submit" value="注册" /> -->
<input type="button" value="注册" id="submitButton"/>
<input type="reset" value="重置" />
</form>
</body>
</html>
结果:
表单项不合法情况示例:
表单项全部合法可提交示例:
原文地址:https://www.cnblogs.com/yerun/p/12902215.html
- [译]Laravel 5.0 之事件自动生成
- [译]Laravel 5.0 之 Eloquent 属性转换
- [译]Laravel 5.0 之事件及处理程序
- 自相关与偏自相关的简单介绍
- [译]Laravel 5.0 之命令及处理程序
- Deep Photo Styletransfer的一种纯Tensorflow实现,教你如何转换图片风格
- 如何提前体验 Laravel 5.5
- Laravel 4 小技巧两则
- [译]Laravel 5.0 之 ValidatesWhenResolved
- Python机器学习的练习七:K-Means聚类和主成分分析
- [译]Laravel 5.0 之方法注入
- [译]Laravel 5.0 之 Middleware (Filter-Style)
- [译]Laravel 5.0 之目录结构与命名空间
- Python机器学习的练习六:支持向量机
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 如何使用Angular FormBuilder
- Angular HTML template的解析位置
- Angular FormBuilder的工作原理
- Angular HTTPClient的使用方法
- nodejs错误:PayloadTooLargeError: request entity too large
- 富文本编辑器 tinymce 的使用
- dotnet core 在 MAC 系统下删除应用程序自己后调 Process Start 方法将会抛出 Win32 异常
- 如何从高德获取地铁数据
- Yaconf - windows 环境下的高性能配置操作
- [ 物联网篇 ] 26 -ALSA Plug 中 multi 的应用
- LeetCode 1546. Maximum Number of Non-Overlapping Subarrays With Sum Equals Target(动态规划)
- HTML加载顺序
- 基于飞桨PaddleClas实现轧钢带表面缺陷分类,top1准确率可达100%
- 01Python的基本的数据结构之List
- 02Python数据结构之再谈List的常用操作