javascript 一个完整的表单验证实例
时间:2015-12-14
在提交表单之前,一般都需要对表单数据进行验证,验证方法包括两种,一种是在客户提交到服务器之前验证(即客户端验证),一种是服务器端验证。本文章向大家展示js客户端验证表单的实例。需要的小伙伴可以参考一下。
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function validatePersonalInfo(){<!-- w ww. j a va 2s . c o m-->
var _first = document.info.fname.value;
var _last = document.info.lname.value;
var _street = document.info.street.value;
var _city = document.info.city.value;
var _zip = document.info.zip.value;
var _phone = document.info.phone.value;
var _email = document.info.email.value;
if(_first.toString() == ""){console.log("Please enter a first name.");}
if(_last.toString() == ""){console.log("Please enter a last name.");}
if(_street.toString() == ""){console.log("Please enter your street name.");}
if(_city.toString() == ""){console.log("Please enter your city.");}
if(_zip.toString() == ""){console.log("Please enter your zip.");}
if(_phone.toString() == ""){console.log("Please enter your phone number.");}
if(_email.toString() == ""){console.log("Please enter your email.");}
var checkZip = checkNum(5);
var phoneInput = document.info.phone.value;
var validPhone = false;
var validZip = false;
if(checkZip == true){
validZip = true;
}
else{
console.log("Invalid Zip Code" + validZip);
}
if(!checkPhone(phoneInput)){
console.log("Phone number is invalid." + validPhone);
}
else{
validPhone = true;
}
if(validZip && validPhone){
console.log("Your form has been verified");
}
}
// Strips hyphens out of phone number and verifies that
// phone number is valid. Any phone number in the format
// xxxxxxxxxx, xxx-xxx-xxxx, or (xxx)xxx-xxxx will be valid
function checkPhone(str){
var regexp = /^(\d{10}|\d{3}-\d{3}-\d{4}|\(\d{3}\)\d{3}-\d{4})$/;
return regexp.test(str);
}
function checkNum(length){
var zipEntry = document.info.zip.value;
var zipNum = parseInt(zipEntry, 10);
if (document.info.zip.value.length == length){
if(zipNum != 0 && isNaN(zipNum) == false){
return true;
}
else {
return false;
}
}
else {
return false;
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="info" ACTION="" METHOD="post">
<TABLE>
<TR><TD ALIGN="left">First Name:</TD>
<TD ALIGN="left">
<INPUT TYPE="text" NAME="fname" SIZE=15>
Last Name:
<INPUT TYPE="text" NAME="lname" SIZE=20>
</TD>
</TR>
<BR>
<TR><TD ALIGN="left">Street:</TD>
<TD ALIGN="left">
<INPUT TYPE="text" NAME="street" SIZE=30></TD>
</TR>
<BR>
<TR>
<TD ALIGN="left">City:</TD>
<TD ALIGN="left">
<INPUT TYPE="text" NAME="city" SIZE=15>
State:
<SELECT NAME="state">
<OPTION value=AL>AL
<OPTION value=AK>AK
<OPTION value=AZ>AZ
</SELECT>
Zip:
<INPUT TYPE="text" NAME="zip" SIZE=7>
</TD>
</TR>
<BR>
<TR><TD ALIGN="left">Phone (w/area code):</TD>
<TD ALIGN="left">
<INPUT TYPE="text" NAME="phone" SIZE=20></TD>
</TR>
<BR>
<TR><TD ALIGN="left">Email:</TD>
<TD ALIGN="left">
<INPUT TYPE="text" NAME="email" SIZE=20></TD>
</TR>
<BR>
</TABLE>
<INPUT TYPE="button" VALUE="Submit" onclick="validatePersonalInfo()">
</FORM>
</BODY>
</HTML>
简单讲一下js语法:
document.info.fname.value
这个js表示获取name为info表单里面name是fname的input的值。
其他方法类似。
你可以将代码复制到这里运行一把
- 更新Silverlight ctp到Silverlight beta 1.0
- JSON.stringify(), JSON.parse(), toJSON()方法使用
- compression功能测试
- 源码阅读再来一发:解读RGW中request的处理流程
- 绘制Crushmap分布图-Python
- RGW奇淫技巧-玩转system特权
- 源码走读rgw内置civetweb的参数初始化过程
- 重磅:Flume1-7结合kafka讲解
- 遍历删除List中的元素
- RGW Bucket Shard设计与优化-下
- RGW Bucket Shard设计与优化-中
- 实战phoenix
- WPF/Silverlight中的Command
- RGW Bucket Shard设计与优化-上
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- CentOS环境下安装PHPUnit的方法分析
- Centos下安装Ansible的示例代码
- ubuntu18.04安装搜狗拼音的简易教程
- linux中$符号的基础用法总结
- Linux下的 mariadb 使用 root 用户启动方式(推荐)
- window与linux项目部署之linux文件路径不存在问题
- Ubuntu 18.04安装 pyenv、pyenv-virtualenv、virtualenv、Numpy、SciPy、Pillow、Matplotlib
- Linux使用 iftop 实时监控网卡的流量
- Centos中TCPWrappers访问控制实现
- CentOS7 重新分配分区大小的实现方法
- Linux 下安装pip包的方法
- Linux系统设置PATH环境变量(3种方法)
- leetcode栈之有效的括号
- linux系统安装iso文件方法
- xshell 远程登陆CentOS7 免密登陆的思路详解