javascript表单验证的例子
function checkUsername(){
//对username的内容进行验证。
//要求：首字符是字母或下划线，其他由下划线字母数字组成，共4-20位
var inputOb=document.getElementsByName('username')[0];
var v=inputOb.value;
if(/^[_a-zA-Z]\w{3,19}$/.test(v)){
showMessage("用户名正确",'username');
return true;
}else{
showMessage("用户名错误",'username');
return false;
}
}
function checkPassword(){
//要求：数字字母_ 6-20
var v=document.getElementsByName('pw')[0].value;
if(/^\w{6,20}$/.test(v)){
showMessage("密码正确",'pw');
return true;
}else{
showMessage("密码错误",'pw');
return false;
}
}
function checkRePassword(){
//两次输入密码是否一致
var v=document.getElementsByName('pw')[0].value;
var v1=document.getElementsByName('pw1')[0].value;
if(v==v1){
showMessage('两次密码一致','pw1');
return true;
}else{
showMessage('两次密码不一致','pw1');
return false;
}
}
function checkEmail(){
//得到email框的内容
var v=document.getElementsByName('email')[0].value;
//验证，提示
if(/^\w+@\w+(\.\w+)+$/.test(v)){
showMessage('邮箱格式正确','email');
return true;
}else{
showMessage('邮箱格式错误','email');
return false;
}
}
function checkTel(){
//得到email框的内容
var v=document.getElementsByName('tel')[0].value;
//验证，提示
if(/^1[34578]\d{9}$/.test(v)){
showMessage('电话格式正确','tel');
return true;
}else{
showMessage('电话格式错误','tel');
return false;
}
}
function checkForm(){
if(checkUsername()&&checkPassword()&&checkRePassword()&&checkEmail()&&checkTel()){
return true;
}else{
return false;
}
}
//信息提示
function showMessage(message,elementName){
//创建div
var divOb=document.createElement('div');
divOb.innerHTML=message;
//获取elementName的右上角位置
var cOb=document.getElementsByName(elementName)[0];
var T=cOb.offsetTop;
var L=cOb.offsetLeft+cOb.offsetWidth;
//把td中的div全部去掉
var divList=cOb.parentNode.getElementsByTagName('div');
for(var i=divList.length-1;i>=0;i--){
cOb.parentNode.removeChild(divList[i]);
}
cOb.parentNode.insertBefore(divOb,cOb);
cOb.parentNode.style.position='relative';
divOb.style.position='absolute';
divOb.style.zIndex=1000;
divOb.style.left=L+"px";
divOb.style.top=T+"px";
divOb.style.border="1px solid orange"
divOb.style.padding='1px 3px';
divOb.style.fontSize="12px";
}
表单
<!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>Insert title here</title>
<style type="text/css">
*{padding:0;margin:0;}
table{margin:20px auto;}
</style>
<script type="text/javascript" src="js/checkForm.js"></script>
</head>
<body>
<form action="save.php" method="post" onsubmit="return checkForm();">
<table border=0 cellpadding=0 cellspacing=0 width=90% align="center">
<tr>
<td height="60" colspan="2">
<h1>会员注册</h1>
</td>
</tr>
<tr>
<td class="c1">用户名：</td>
<td><input onchange="checkUsername();" type="text" name="username"/></td>
</tr>
<tr>
<td class="c1">密码：</td>
<td><input onchange="checkPassword();" type="password" name="pw"/></td>
</tr>
<tr>
<td class="c1">重复密码：</td>
<td><input onchange="checkRePassword();" type="password" name="pw1"/></td>
</tr>
<tr>
<td class="c1">邮箱：</td>
<td><input onchange="checkEmail();" type="text" name="email"/></td>
</tr>
<tr>
<td class="c1">性别：</td>
<td>
<input type="radio" name="sex" value="男"/>男<br/>
<input type="radio" name="sex" value="女"/>女<br/>
<input type="radio" name="sex" value="保密" checked="checked"/>保密
</td>
</tr>
<tr>
<td class="c1">爱好：</td>
<td>
<input type="checkbox" name="like[]" value='1'/>篮球<br/>
<input type="checkbox" name="like[]" value='2'/>足球<br/>
<input type="checkbox" name="like[]" value='3'/>羽毛球
</td>
</tr>
<tr>
<td class="c1">电话：</td>
<td><input onchange="checkTel()" type="text" name="tel"/></td>
</tr>
<tr>
<td class="c1">简介：</td>
<td>
<textarea name="intro" cols="60" rows="6"></textarea>
</td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="注册"/></td>
</tr>
</table>
</form>
</body>
</html>
javascript表单验证的例子的更多相关文章
- javascript:正则表达式、一个表单验证的例子
本文内容: 正则表达式 正则表达式的使用方法 正则表达式的特殊匹配字符 正则表达式修饰符 利用正则表达式进行表单验证的例子 首发日期:2018-05-13 正则表达式: 正则表达式的使用方法: 首先创 ...
- JavaScript表单验证年龄
JavaScript表单验证年龄,判断一个输入量是否符合年龄,通过正则表达式实现. //检查年龄 function isAge(str){ var mydate=new Date; var now=m ...
- 前端工具 - 15个最佳的 JavaScript 表单验证库
客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...
- JavaScript表单验证和正则表达式
JavaScript表单验证 分为四类: 1.非空验证 常用于用户名等 2.相等验证 常用于验证两次输入的密码 3.范围验证 常用于年龄等 4.正则验证 用于手机号,邮箱号等 以下是实例: <! ...
- 使用 WTForms 进行表单验证的例子
#使用 WTForms 进行表单验证的例子 from wtforms import Form from wtforms import BooleanField from wtforms import ...
- 15个最佳的 JavaScript 表单验证库
客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...
- JavaScript 表单验证入门
JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 被 JavaScript 验证的这些典型的表单数据有: 用户是否已填写表单 ...
- JavaScript 表单验证 案例
JavaScript 表单验证 案例 版权声明:未经授权,严禁转载! 编写 HTML 文件,搭建主体界面 <html> <head> <meta charset=&q ...
- 10个强大的Javascript表单验证插件推荐
创建一个JavaScript表单验证插件,可以说是一个繁琐的过程,涉及到初期设计.开发与测试等等环节.实际上一个优秀的程序员不仅是技术高手,也应该是善假于外物的.本文介绍了10个不错的JavaScri ...
随机推荐
- Devops、CI\CD、Jenkins
Devops DevOps对应用程序发布的影响 在很多企业中,应用程序发布是一项涉及多个团队.压力很大.风险很高的活动.然而在具备DevOps能力的组织中,应用程序发布的风险很低,原因如下 [2] : ...
- 同时安装CUDA8.0和CUDA9.0
http://geyao1995.com/CUDA8_CUDA9/ tensorflow1.5版本竟然不支持CUDA8.0了 卸载是不可能卸载的 1.原料准备 CUDA9.0下载:https://de ...
- nucleus 学习 中断
;************************************************************************ ;* ;* FUNCTION ;* ;* INT_I ...
- Python每日一题 006
题目 你有一个目录,装了很多照片,把它们的尺寸变成都不大于 iPhone5 分辨率的大小. 如果只是单纯的通过将图片缩放到iPhone5分辨率大小,显然最后呈现出来的效果会很糟糕.所以等比例缩放到长( ...
- express设置允许跨域访问该服务.
const express = require('express');const app = express(); //设置允许跨域访问该服务.app.all('*', function (req, ...
- 2019牛客多校第四场 I题 后缀自动机_后缀数组_求两个串de公共子串的种类数
目录 求若干个串的公共子串个数相关变形题 对一个串建后缀自动机,另一个串在上面跑同时计数 广义后缀自动机 后缀数组 其他:POJ 3415 求两个串长度至少为k的公共子串数量 @(牛客多校第四场 I题 ...
- php开发面试题---php 对swoole的理解
php开发面试题---php 对swoole的理解 一.总结 一句话总结: 以战养学,实例驱动 swoole是披着PHP外衣的C程序:其实就是c.java那些语言里面的高阶功能:比如 持久连接.异步通 ...
- tp5.0如何获取header的Authorization值
tp5.0如何获取header的Authorization值$request->header();好像没有这个值的但是发送请求头部有的 解决方案: 在.htaccess 文件中加入 设置 Set ...
- java 实现一套流程管理、流转的思路（伪工作流） 【仅供参考】
转: java 实现一套流程管理.流转的思路(伪工作流) 在做某个管理项目时,被要求实现一套流程管理,比如请假的申请审批流程等,在参考了很多资料,并和同事讨论后,得到了一个自主实现的流程管理. 以下提 ...
- Java短路运算符和非短路运算符
在Java中短路运算符指的是"&&"(与) 和"||"(或) ,非短路运算符指的是"&" 和"|" ...