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表单验证的例子的更多相关文章

  1. javascript:正则表达式、一个表单验证的例子

    本文内容: 正则表达式 正则表达式的使用方法 正则表达式的特殊匹配字符 正则表达式修饰符 利用正则表达式进行表单验证的例子 首发日期:2018-05-13 正则表达式: 正则表达式的使用方法: 首先创 ...

  2. JavaScript表单验证年龄

    JavaScript表单验证年龄,判断一个输入量是否符合年龄,通过正则表达式实现. //检查年龄 function isAge(str){ var mydate=new Date; var now=m ...

  3. 前端工具 - 15个最佳的 JavaScript 表单验证库

    客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...

  4. JavaScript表单验证和正则表达式

    JavaScript表单验证 分为四类: 1.非空验证 常用于用户名等 2.相等验证 常用于验证两次输入的密码 3.范围验证 常用于年龄等 4.正则验证 用于手机号,邮箱号等 以下是实例: <! ...

  5. 使用 WTForms 进行表单验证的例子

    #使用 WTForms 进行表单验证的例子 from wtforms import Form from wtforms import BooleanField from wtforms import ...

  6. 15个最佳的 JavaScript 表单验证库

    客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...

  7. JavaScript 表单验证入门

    JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 被 JavaScript 验证的这些典型的表单数据有: 用户是否已填写表单 ...

  8. JavaScript 表单验证 案例

    JavaScript 表单验证 案例 版权声明:未经授权,严禁转载!   编写 HTML 文件,搭建主体界面 <html> <head> <meta charset=&q ...

  9. 10个强大的Javascript表单验证插件推荐

    创建一个JavaScript表单验证插件,可以说是一个繁琐的过程,涉及到初期设计.开发与测试等等环节.实际上一个优秀的程序员不仅是技术高手,也应该是善假于外物的.本文介绍了10个不错的JavaScri ...

随机推荐

  1. qt学习（四）主窗选钮，显示新窗口。

    游戏有选区这个习惯, 当然,我特指<冒险岛>了,有的时候就是打开一个主屏幕上五个按钮让你点击进入, 甚至有的时候进去了还要选哪个频道,游戏服务器都得分区,频道来完成功能.现在我们先进入想选 ...

  2. POJ 2808 校门外的树（线段树入门）

    题目描述 某校大门外长度为L的马路上有一排树,每两棵相邻的树之间的间隔都是1米.我们可以把马路看成一个数轴,马路的一端在数轴0的位置,另一端在L的位置:数轴上的每个整数点,即0,1,2,……,L,都种 ...

  3. 洛谷P1122 最大子树和 （树状dp）

    题目描述 小明对数学饱有兴趣,并且是个勤奋好学的学生,总是在课后留在教室向老师请教一些问题.一天他早晨骑车去上课,路上见到一个老伯正在修剪花花草草,顿时想到了一个有关修剪花卉的问题.于是当日课后,小明 ...

  4. angularjs &登录跳转

    如果要使用$location,$stateParams,那么必须有相应形参controller: function ($rootScope, $http, $scope, $state,$locati ...

  5. 【从0到1，搭建Spring Boot+RESTful API+Shiro+Mybatis+SQLServer权限系统】06、Mybatis+SQLServer集成

    1.增加POM依赖 注意pagehelper插件,我重写过,可以到我的这篇文章了解https://www.cnblogs.com/LiveYourLife/p/9176934.html <dep ...

  6. 2019 ICPC Asia Nanchang Regional C And and Pair 找规律/位运算/dp

    题意: 给定一个二进制表示的n,让你找满足如下要求的数对(i,j)的个数 $0 \leqslant j \leqslant i \leqslant n$ $ i & n = i $ $ i & ...

  7. 求最小生成树（暴力法，prim，prim的堆优化，kruskal）

    求最小生成树(暴力法,prim,prim的堆优化,kruskal) 5 71 2 22 5 21 3 41 4 73 4 12 3 13 5 6 我们采用的是dfs的回溯暴力,所以对于如下图,只能搜索 ...

  8. Redis入门很简单之四【初识Jedis】

    Redis入门很简单之四[初识Jedis] 博客分类: NoSQL/Redis/MongoDB redisnosql缓存jedis  使用Jedis提供的Java API对Redis进行操作,是Red ...

  9. Redis入门很简单之二【常见操作命令】

    Redis入门很简单之二[常见操作命令] 博客分类: NoSQL/Redis/MongoDB redisnosql缓存  Redis提供了丰富的命令,允许我们连接客户端对其进行直接操作.这里简单介绍一 ...

  10. PicoCTF 2013 Dark Star 分析

    0x00题目 题目可以从GitHub中找到:https://github.com/picoCTF/2013-Problems/blob/master/Dark%20Star/darkstar.img ...