思路：
1、定义页面
通过表格格式化表单；
表格行都有自己的背景颜色；
单元格中的数据(文本等)用div进行封装，好操作；
2、定义样式
表格的样式；
div的样式；
3、动态效果
页面加载时，将所有的输入框定义默认框线颜色和获取焦点时的框线颜色；
进行内容校验，不正确时显示警告信息。
代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>表单验证</title>
<!-- 思路：
1、定义页面
通过表格格式化表单；
表格行都有自己的背景颜色；
单元格中的数据(文本等)用div进行封装，好操作；
2、定义样式
表格的样式；
div的样式；
3、动态效果
页面加载时，将所有的输入框定义默认框线颜色和获取焦点时的框线颜色；
进行内容校验，不正确时显示警告信息。
-->
<style type="text/css">
table{
border: #A50DFA 1px solid;
width: 500px;
border-collapse: collapse;
}
table th, table td{
border: #A50DFA 1px solid;
padding:10px;
}
table th{
}
table td{
}
.errorinfo{
color: #EA1508;
font-family: "华文行楷";
font-weight: bold;
display: none;
}
.focus{
border: #03F2FC 2px solid;
}
.outs{
border: #81710D 1px solid;
}
.error{
border: #FA0324 2px solid;
}
</style>
<script type="text/javascript">
function checkinput(input){
input.className = "outs";
input.onfocus = function(){
this.className = "focus";
}
}
/*窗口加载时就执行*/
window.onload = function(){
with(document.forms[0]){
checkinput(user);
checkinput(psw);
checkinput(repsw);
checkinput(mail);
}
}
/*验证输入的数据*/
/*方法一：每个输入框一个function，代码重复性高,舍弃不用。*/
function checkDate(userNode){
var value = userNode.value;
var regex = /^\w{3,5}$/;
var divNode = document.getElementById("userdiv");
if(regex.test(value)){
userNode.className = "outs";
divNode.style.display = "none";
}else{
userNode.className = "error";
divNode.style.display = "block";
}
}
/*方法二*/
function check(inputNode, regex, divId){
var divNode = document.getElementById(divId);
if(regex.test(inputNode.value)){
inputNode.className = "outs";
divNode.style.display = "none";
}else{
inputNode.className = "error";
divNode.style.display = "block";
}
}
/*验证用户名*/
function checkUser(userNode){
var regex = /^\w{3,5}$/;
check(userNode, regex, "userdiv");
}
/*验证密码格式*/
function checkPsw(pswNode){
var regex = /^[a-z0-9]{4,8}$/i;
check(pswNode, regex, "pswdiv");
}
/*验证两次密码是否一致*/
function checkRepsw(repswNode){
var psw = document.getElementById("psw").value;
var repsw = repswNode.value;
var divNode = document.getElementById("repswdiv");
if(psw == repsw){
repswNode.className = "outs";
divNode.style.display = "none";
}else{
repswNode.className = "error";
divNode.style.display = "block";
}
}
/*验证邮箱*/
function checkMail(mailNode){
var regex = /^\w+@\w+(\.\w+)+$/;
check(mailNode, regex, "maildiv");
}
</script>
</head>
<body>
<form>
<table>
<tr>
<th>用户注册</th>
</tr>
<tr>
<td>
<div>用户名</div>
<div>
<input type="text" name="user" onblur="checkUser(this)"/>
</div>
<div class="errorinfo" id="userdiv">用户名填写错误。</div>
<div>用户名必须是3-5位，由字母(a-z)、数字(0-9)、下划线(_)组成</div>
</td>
</tr>
<tr>
<td>
<div>密码</div>
<div>
<input type="password" name="psw" id="psw" onblur="checkPsw(this)"/>
</div>
<div class="errorinfo" id="pswdiv">密码格式错误。</div><br/>
<div>确认密码</div>
<div>
<input type="password" name="repsw" onblur="checkRepsw(this)"/>
</div>
<div class="errorinfo" id="repswdiv">两次输入密码不一致。</div>
<div>密码必须是4-8位，由字母(a-z)、数字(0-9)组成</div>
</td>
</tr>
<tr>
<td>
<div>邮箱</div>
<div>
<input type="text" name="mail" onblur="checkMail(this)"/>
</div>
<div class="errorinfo" id="maildiv">邮箱格式错误，请规范填写。</div>
</td>
</tr>
<tr>
<th><input type="button" value="提交数据" onclick="submitDate()"></th>
</tr>
</table>
</form>
</body>
</html>
![]()
![]()
- ★★★【卡法 常用js库】： js汇合 表单验证 cookie设置 日期格式 电话手机号码 email 整数 小数 金额 检查参数长度
[卡法 常用js库]: js汇合 表单验证 cookie设置 日期格式 电话手机号码 email 整数 小数 金额 检查参数长度 // +---------------------- ...
- js基础-表单验证和提交
基础知识: 原始提交如下: <form action="/login" method="post" id="form1"> &l ...
- JS通用表单验证函数,基于javascript正则表达式
表单的验证在实际的开发当中是件很烦琐又无趣的事情今天在做一个小项目的时候,需要JS验证,寻找到一个比较好的东西 地址如下: http://blog.csdn.net/goodfunman/archiv ...
- JS简单表单验证
这里我是写了一个简单的注册表单验证功能,亲测有效,一起来看看吧! 首先我的HTML代码是这样的: class大家可以忽略一下,这里我项目使用的是bootstrap的样式. 输入用户名和密码用的是正则表 ...
- 表单提交学习笔记（二）—使用jquery.validate.js进行表单验证
一.官网下载地址:http://plugins.jquery.com/validate/ 二.用法 1.在页面上进行引用 <script src="~/scripts/jquery-1 ...
- 原生js的表单验证
最近在学原生的js,把一些练手的代码往博客放一放,权当积累经验,若有错漏,或是觉得浅显,大家不要见怪. 这是一个原生js编写的简单的表单验证: <!DOCTYPE html><htm ...
- js——form表单验证
用js实现一个简易的表单验证 效果: 代码: <html> <head> <title>js校验form表单</title> <meta char ...
- 原生JS写表单验证提交功能
先上效果图: 表单的基础内容就是昵称判断.手机号判断.邮箱判断.身份证号码判断,这里是用到正则验证检验格式. 页面的表单写法就是一个form的提交.输入框用input来实现,输入内容用value来获取 ...
- 原生js制作表单验证，基本的表单验证方法
表单验证是web前端最常见的功能之一,也属于前端开发的基本功.自己完成一个表单验证的开发,也有助于加深对字符串处理和正则表达式的理解. 基本的表单验证包括如:字母验证.数字验证.字母和数字验证.汉字验 ...
随机推荐
- vue2.0有哪些变化
vue2.0之后有哪些变化: 1.每个组件模板template,不再支持片段代码 之前: <template> <h3>vue-router+vue-loader</h3 ...
- html学习第三天—— 第12章——css布局模型
清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...
- 控制台游戏引擎CGE——贪吃蛇
今天我也来发一个控制台游戏.先看图: 缘起 LZ是一个有严重拖延症的人,表现的形式就是隔一段时间就要刷一刷博客园. 这不前几天,看到了魏大师<使用Lua脚本语言开发出高扩展性的系统...> ...
- css/js(工作中遇到的问题)-4
JS生成随机的由字母数字组合的字符串 Math.random().toString(36).substr(2)
- 利用css中的background-position定位图片
今天遇到一个新鲜的问题,如果定位一个设计师设计的图片.例子如下: 实现只显示每一个图标,主要是将图片等分,然后通过background-position来控制,注意等分的时候要减一,第一个百分比表示x ...
- 使用CocoaPods过程中 Unable to find a specification for
文章转自:http://blog.csdn.net/zhangao0086/article/details/39703083 当把CocoaPods生成的workspace移动到上层目录时,需要改下P ...
- Arduino下LCD1602综合探究（上）——1602的两种驱动方式，如何使LCD的控制编程变得更简单
一.前言: LCD ( Liquid Crystal Display 的简称)液晶显示器,已经逐渐替代CRT成为主流的显示设备之一,因此也成为了单片机发烧友绕不过的话题之一:而LCD1602更是很多单 ...
- 【BZOJ3940】【BZOJ3942】[Usaco2015 Feb]Censoring AC自动机/KMP/hash+栈
[BZOJ3942][Usaco2015 Feb]Censoring Description Farmer John has purchased a subscription to Good Hoov ...
- ssh自动输入密码脚本 切换目录脚本
利用expect的,首先查看expect,命令:which expect #!/usr/bin/expect -f spawn ssh 用户名@ip地址 expect "assword:&q ...
- 使用QQ邮箱发送email（Python）
实际开发过程中使用到邮箱的概率很高,那么如何借助python使用qq邮箱发送邮件呢? 代码很简单,短短几行代码就可以实现这个功能. 使用到的模块有smtplib和email这个两个模块,关于这两个模块 ...
