form表单验证-Javascript
Form表单验证：
js基础考试内容，form表单验证，正则表达式，blur事件，自动获取数组，以及css布局样式，动态清除等。完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>form-lpb</title>
<style>
body {
background:#CCF;
font-size:12px;
}
.box {
margin:20px 50px;
line-height:25px;
}
.box .box_sel {
margin-left:25px;
}
.text {
text-align:right;
}
span {
color:#900;
}
.length {
width:38px;
}
</style>
</head> <body>
<div class="box">
<!--form star-->
<form action="submit.html" onsubmit="return checkAll()">
<table>
<tr>
<td class="text">账号</td>
<td><input type="text" id="userName" onblur="b_userName()" /></td>
<td><span id="span_userName"></span></td>
</tr>
<tr>
<td class="text"> 密码</td>
<td><input type="password" id="pass" onblur="b_pass()" /></td>
<td> <span id="span_pass"></span></td>
</tr>
<tr>
<td class="text">重复密码</td>
<td><input type="password" id="pass1" onblur="b_pass1()" /></td>
<td> <span id="span_pass1"></span></td>
</tr>
<tr>
<td class="text">手机号</td>
<td><input type="text" id="tel" onblur="b_tel()" /></td>
<td> <span id="span_tel"></span></td>
</tr>
<tr>
<td class="text">身份证号</td>
<td><input type="text" id="idCard" onblur="b_idCard()" /></td>
<td><span id="span_idCard"></span></td>
</tr>
<tr>
<td class="text">出生年月日</td>
<td>
<input type="text" id="year" class="length" disabled="disabled" />
<input type="text" id="month" class="length" disabled="disabled" />
<input type="text" id="day" class="length" disabled="disabled" />
</td>
</tr>
<tr>
<td class="text"> 邮箱</td>
<td><input type="text" id="email" onblur="b_email()" /></td>
<td><span id="span_email"></span></td>
</tr>
</table>
<div class="box_sel">
爱好
<select>
<option>篮球</option>
<option>足球</option>
<option>排球</option>
</select>
地区
<select>
<option>河南</option>
<option>湖南</option>
<option>河北</option>
</select>
<br />
<input type="checkbox" id="ch_box" onclick="c_box()" />
是否同意
<a href="xieyi.html" target="_blank">公司协议</a>
<br />
<input type="submit" id="sub" value="提交注册" disabled="disabled" />
<input type="reset" id="rst" value="重新填写" onclick="sub_return()" />
</div>
</form>
<!--end form -->
</div>
<script>
// 用户名 校验
function b_userName(){
var reg = /^[a-zA-Z]{3,9}[_]*[0-9]{3,9}$/; // 用户名-正则表达式
var c_use = document.getElementById("userName").value;
var c_span_use = document.getElementById("span_userName");
if(reg.test(c_use)){
c_span_use.innerHTML="√";
return true;
}else {
c_span_use.innerHTML="用户名必须以3-9个字母开头，可以有下划线_，后面3-9个数字";
}
}
// 密码 校验
function b_pass(){
var reg = /^[a-zA-Z]{3,6}[_]*[0-9]{3,9}$/; // 密码-正则表达式
var c_pass = document.getElementById("pass").value;
var c_span_pass =document.getElementById("span_pass");
if(reg.test(c_pass)){
c_span_pass.innerHTML="√";
return true;
} else {
c_span_pass.innerHTML="密码必须以3-6个英文字母开头，后面3-9个数字";
return false;
}
}
// 重复密码 校验、
function b_pass1(){
var cm = document.getElementById("pass1").value;
var cm_sp = document.getElementById("span_pass1");
var c_pass = document.getElementById("pass").value;
if(cm==c_pass&&cm!=""){
cm_sp.innerHTML="√";
return true;
}else{
cm_sp.innerHTML="请重复密码";
return false;
}
}
// 手机号 校验
function b_tel(){
var reg = /^(\+86)?[1][3,5,8][0-9]{9}$/;
var c_tel = document.getElementById("tel").value;
var c_span_tel = document.getElementById("span_tel");
if(reg.test(c_tel)){
c_span_tel.innerHTML="√";
return true;
}else {
c_span_tel.innerHTML="手机号可以（+86）第一位是1，第二位是【3,5,8】，共11位数字";
return false;
}
}
// 身份证号 校验
function b_idCard(){
var reg = /\d{17}\w{1}|\d{15}/;
var c_idCard = document.getElementById("idCard").value;
var c_span_idCard = document.getElementById("span_idCard");
if(reg.test(c_idCard)){
c_span_idCard.innerHTML="√";
document.getElementById("year").value=c_idCard.substr(6,4);// 自动 获取 年份
document.getElementById("month").value=c_idCard.substr(10,2);// 自动 获取 月份
document.getElementById("day").value=c_idCard.substr(12,2);
return true;
}else{
c_span_idCard.innerHTML="身份证格式错误，必须是18位数或者是15位数";
document.getElementById("year").value="";// 自动 获取 年份
document.getElementById("month").value="";// 自动 获取 月份
document.getElementById("day").value="";
return false;
}
}
// 邮箱 校验
function b_email(){
var reg = /\w+@\w+\.\w+/;
var c_email = document.getElementById("email").value;
var c_span_email = document.getElementById("span_email");
if(reg.test(c_email)){
c_span_email.innerHTML="√";
return true;
}else {
c_span_email.innerHTML="邮箱格式错误，必须包含 @ 和 . ";
return false;
}
}
// 协议 校验
function c_box(){
var c_b = document.getElementById("ch_box");
var c_sub = document.getElementById("sub");
if(c_b.checked){
c_sub.disabled=false;
}else{
c_sub.disabled=true;
}
}
// sub_return 当点击重新填写时 提交 按钮 恢复为不可用状态
function sub_return(){
var subt = document.getElementById("sub");
subt.disabled=true;
var span_clean = document.getElementsByTagName("span"); for(var i=0;i<=span_clean.length;i++){
var span1 = span_clean[i];
span1.innerHTML= "";
}
}
// 整体 校验
function checkAll(){
var c1 =b_userName();
var c2 =b_pass();
var c3 =b_tel();
var c4 =b_idCard();
var c5 =b_email();
if(c1&&c2&&c3&&c4&&c5){
return true;
}else{
return false;
}
}
</script>
</body>
</html>
效果 如下图所示：
【结语】
三人行，必有我师焉。
form表单验证-Javascript的更多相关文章
- form表单验证2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Day19 Django之Form表单验证、CSRF、Cookie、Session和Model操作
一.Form表单验证 用于做用户提交数据的验证1.自定义规则 a.自定义规则(类,字段名==html中的name值)b.数据提交-规则进行匹配代码如下: """day19 ...
- [php基础]PHP Form表单验证:PHP form validator使用说明
在PHP网站开发建设中,用户注册.留言是必不可少的功能,用户提交的信息数据都是通过Form表单提交,为了保证数据的完整性.安全性,PHP Form表单验证是过滤数据的首要环节,PHP对表单提交数据的验 ...
- 基于Bootstrap+jQuery.validate Form表单验证实践
基于Bootstrap jQuery.validate Form表单验证实践 项目结构 : github 上源码地址:https://github.com/starzou/front-end- ...
- form表单验证失败，阻止表单提交
form表单验证失败,阻止表单提交 效果演示: 贴上完整代码: <!DOCTYPE html> <html lang="en"> <head> ...
- 用jquery写自己的form表单验证
这几天看了锋利的jquery,感觉很不错.特别是jquery强大的选择器.今天就利用jquery写了一个自己的form表单验证的小案例.当巩固下jquery.首先贴下代码,当然只是一个小案例. 思路: ...
- django之form表单验证
django中的Form一般有两种功能: 输入html 验证用户输入 #!/usr/bin/env python # -*- coding:utf- -*- import re from django ...
- python_way day19 HTML-day5 （form表单验证，CSRF,cookie，session,缓存）
python-way day19 1. dJango的form表单验证 2.CSRF 跨站请求伪造 3.cookie,session 4.缓存 一,django表单验证功能 1.django验证基础: ...
- django form表单验证
一. django form表单验证引入 有时时候我们需要使用get,post,put等方式在前台HTML页面提交一些数据到后台处理例 ; <!DOCTYPE html> <html ...
随机推荐
- ASP.NET路由模型解析
大家好,我又来吹牛逼了 ~-＿-~ 转载请注明出处:来自吹牛逼之<ASP.NET路由模型解析> 背景:很多人知道Asp.Net中路由怎么用的,却不知道路由模型内部的运行原理,今天我就给大家 ...
- Git命令总结
本文转载自345大神.... 查看原文 先上个图形化界面GIT工具 SourceTree下载链接 windows版 1.8.3 & Mac版 2.2.4 链接: http://pan.baid ...
- Java中常用集合操作
一.Map 名值对存储的. 常用派生类HashMap类 添加: put(key,value)往集合里添加数据 删除: clear()删除所有 remove(key)清除单个,根据k来找 获取: siz ...
- maven 中snapshot版本和release版本的区别
maven中的仓库分为两种,snapshot快照仓库和release发布仓库.snapshot快照仓库用于保存开发过程中的不稳定版本,release正式仓库则是用来保存稳定的发行版本.定义一个组件/模 ...
- 关于CSS inline-block、BFC以及外边距合并的几个小问题
CSS inline-block和BCF对于初学者来说,总是弄不太明白,下面记录下我在学习这块知识的过程中遇到的几个问题,供大家参考,有不足的地方,欢迎大家批评指正. 一.在什么场景下会出现外边距合并 ...
- Win10提示没有权限使用网络资源问题解决
借鉴链接:http://www.cr173.com/html/67361_1.html Win10提示没有权限使用网络资源解决方法 1.打开控制面板; 2.在所有控制面板项中找到凭据管理器; 3.添加 ...
- 使用gulp解决RequireJS项目前端缓存问题（二）
1.前言 这一节,我们主要解决在上一节<使用gulp解决RequireJSs项目前端缓存问题(一)>末尾提到的几个问题: 对通过require-config.js引入的js文件修改后,没有 ...
- Linux 利用Google Authenticator实现ssh登录双因素认证
1.介绍 双因素认证:双因素身份认证就是通过你所知道再加上你所能拥有的这二个要素组合到一起才能发挥作用的身份认证系统.双因素认证是一种采用时间同步技术的系统,采用了基于时间.事件和密钥三变量而产生的一 ...
- SpringMVC（关于HandlerMapping执行流程原理分析）
请求过来先碰见中央调度器(前端调度器) //Determine handler for the current request; 对当前请求决定交给哪个handler, 当前请求地址过来 处理器执行链 ...
- 学习笔记：delphi之TStringGrid
1.说明 最近加入了一个项目组,使用的开发工具是delphi6,想想又要开始搞这个工具有点小忧伤,但没办法谁让咱就是个打杂的尼... 的需求是显示一个类似于Word/excel的那种表格,可以合并列等 ...