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 ...
随机推荐
- 10个最好用的HTML/CSS 工具、插件和资料库
大家在使用HTML/CSS开发项目的过程中,有使用过哪些工具,插件和库?下面介绍的10种HTML/CSS工具,插件和资料库,是国外程序员经常用到的. Firebug Lite FirebugLite ...
- 一篇文章看懂TPCx-BB（大数据基准测试工具）源码
TPCx-BB是大数据基准测试工具,它通过模拟零售商的30个应用场景,执行30个查询来衡量基于Hadoop的大数据系统的包括硬件和软件的性能.其中一些场景还用到了机器学习算法(聚类.线性回归等).为了 ...
- IE8/9 本地预览上传图片
本地预览的意思是,在选择图片之后先不上传到服务器,而是由一个<img>标签来预览本地的图片,非 IE8/9 浏览器可以从<input type="file"/&g ...
- Dynamics CRM 之ADFS 使用 WID 的联合服务器场
使用 WID 的联合服务器场 默认拓扑 Active Directory 联合身份验证服务 (AD FS) 是联合服务器场,使用 Windows 内部数据库 (WID). 在这种拓扑, AD FS 使 ...
- ionic第一坑——ion-slide-box坑（ion-slide分两页的坑）
ionic.views.Slider = ionic.views.View.inherit({ initialize: function (options) { . . . function setu ...
- 用SecureCRT连接虚拟机中的Linux系统(Ubuntu)
今天突然练习linux命令行的时候,想在window中联系linux命令行.经过一番dudu找到了一个不错的的工具(SecureCRT--意思安全)就是用SSH链接linux主机.推荐大家使用.毕竟w ...
- BZOJ 1597: [Usaco2008 Mar]土地购买 [斜率优化DP]
1597: [Usaco2008 Mar]土地购买 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 4026 Solved: 1473[Submit] ...
- js动态加载css和js
之前写了一个工具类点此链接里面含有这段代码,感觉用处挺多,特意提出来 var loadUtil = { /* * 方法说明:[动态加载js文件css文件] * 使用方法:loadUtil.loadjs ...
- C#开发中使用配置文件对象简化配置的本地保存
C#开发中使用配置文件对象简化配置的本地保存 0x00 起因 程序的核心是数据和逻辑,开发过程中免不了要对操作的数据进行设置,而有些数据在程序执行过程中被用户或程序做出的修改是应该保存下来的,这样程序 ...
- ReactNative入门（安卓）——API（下）
LayoutAnimation - layout动画 当布局发生改变时的动画模块,它有两个方法: 1. 最常用的方法是 LayoutAnimation.configureNext(conf<Ob ...