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 ...
随机推荐
- mysql inner join用法
inner join(等值连接):只返回两个表中联结字段相等的行. left join(左联接):返回包括左表中的所有记录和右表中联结字段相等的记录. right join(右联接):返回包括右表中的 ...
- C# 串口总结
一.串口初始化 定义: using System.IO.Ports; SerialPort myPort = new SerialPort() 初始化: //port初始化 public void _ ...
- 新手指南：DVWA-1.9全级别教程之SQL Injection
*本文原创作者:lonehand,转载须注明来自FreeBuf.COM 目前,最新的DVWA已经更新到1.9版本(http://www.dvwa.co.uk/),而网上的教程大多停留在旧版本,且没有针 ...
- ASP.NET MVC 分页之 局部视图
using System; using System.Collections.Generic; using System.Linq; using System.Security.Cryptograph ...
- symantec SMG 抓包
1．使用putty连接SMG,先用admin账号登陆 执行set-support , 设置一个密码. 2．重新打开一个putty连接SMG,使用support账号登陆.用我们刚才设置的密码. 3．开 ...
- 如何将当前平台升级到SonarQube7.9？[最新]
整体思路 准备测试数据(实际环境可跳过此步骤) 数据库迁移(从版本7.9开始,SonarQube将不再支持MySQL,Mysql-->PG) Sonar版本升级(6.7.7 -> 7.9. ...
- 关于UI自动化测试的思考
不知不觉,时间过去了二年多,从开始想学习自动化(UI自动化到上手做项目)到上手,到能独立开发一个项目的UI自动化脚本. 一直在学习,边做边学,边看边学.边总结(具体看我的博客,其中大部分都是自己的理解 ...
- 关于IDEA的一些问题
关于IDEA的一些问题 快速创建SpringBoot项目传送门:参考网址 创建Maven Web项目(带有webapp文件夹目录的项目)传送门:参考网址
- ubuntu 开机启动shell脚本
1.创建shell启动脚本test 2.将启动脚本复制到 /etc/init.d 目录下 3.设置脚本文件权限 sudo chmod 755 /etc/init.d/test 4.设置脚本启动 sud ...
- （转）Jupyter默认目录和默认浏览器修改
目录 1.总结:修改Anaconda中的Jupyter Notebook默认工作路径的三种方式 # 2.Jupyter默认目录和默认浏览器修改 1.总结:修改Anaconda中的Jupyter Not ...