Web_JavaScript_JS客户端表单数据验证;
2015-05-30 09:09
603 查看
实现：JavaScript客户端表单数据验证；
代码：
<!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=gbk" />
<title>JS客户端表单数据验证_2WorkRoom3</title>
<style>
.error {color: #FF0000;}
</style>
<script type="text/javascript">
/**
* JS客户端表单数据验证
* 1、非空验证
* 2、字符处理
* 3、格式规则
*/
// 错误容器声明
var xmErr,emailErr,websiteErr,genderErr;
// 参数变量声明
var xm,email,website,comment,gender;
// 错误名称字串：有错则加名称，没有则剪掉；
var errStr;
window.onload = function() {
// 错误容器初始化
xmErr = document.getElementById("xmErr");
emailErr = document.getElementById("emailErr");
websiteErr = document.getElementById("websiteErr");
genderErr = document.getElementById("genderErr");
// 参数变量初始化
xm = document.getElementsByName("xm")[0];
email = document.getElementsByName("email")[0];
website = document.getElementsByName("website")[0];
comment = document.getElementsByName("comment")[0];
gender = document.getElementsByName("gender");
document.getElementById("subform").reset();
}
// 客户端验证函数
function formSubFn() {
errStr = ""; // 初始化或是还原；
/// 非空验证、格式规则
// 姓名
if(!isEmpty(xm)) {
// 格式验证：只能为字母空格；
if(dataCheck("^[a-zA-Z ]*$", "i", xm.value)){
setErrInfo(xmErr);
delErrStr("xm");
}else{
setErrInfo(xmErr, "* 姓名只能为字母或者空号字符；");
addErrStr("xm");
}
}else {
setErrInfo(xmErr, "* 姓名不能为空；");
addErrStr("xm");
}
// 电邮
if(!isEmpty(email)) {
if(dataCheck("([\\w\\-]+\@[\\w\\-]+\\.[\\w\\-]+)", "ig", email.value)){
setErrInfo(emailErr);
delErrStr("email");
}else {
setErrInfo(emailErr, "* 邮件地址格式不正确；");
addErrStr("email");
}
}else {
setErrInfo(emailErr, "* 邮件地址不能为空；");
addErrStr("email");
}
// 性别
if(isEmpty(gender[0]) && isEmpty(gender[1])){
setErrInfo(genderErr, "* 性别不能为空；");
addErrStr("gender");
}else {
setErrInfo(genderErr, "*");
delErrStr("gender");
}
// 网址
if(!isEmpty(website)){
if(dataCheck("\\b(?:(?:https?|ftp):\\/\\/|www\\.)[-a-z0-9+&@#\\/%?=~_|!:,.;]*[-a-z0-9+&@#\\/%=~_|]", "i", website.value)){
setErrInfo(websiteErr, " ");
delErrStr("website");
}else {
setErrInfo(websiteErr, "网址格式不正确；");
addErrStr("website");
}
}
var isok = false;
if(errStr.length == 0){
isok = true;
}
console.log("->" + errStr);
return isok;
}
/**
* 格式验证
* regExpStr，正则表达式字串；
* attributes，正则表达式修饰符；
* value，值；
*/
function dataCheck(regExpStr, attributes, value){
var re = new RegExp(regExpStr, attributes);
//console.log("->regExpStr_" + regExpStr + " value_" + value);
return re.test(value);
}
/**
* 空值检查
*/
function isEmpty(element) {
if((typeof element) == "object"){
if(element.getAttribute("type") == "text" || element.toString() == "[object HTMLTextAreaElement]"){
// 文本框处理 或 文本区域
var val = trim(element.value);
if(val == ''){
return true;
}else {
return false;
}
}else if(element.getAttribute("type") == "radio"){
// 单选按钮处理
return !element.checked;
}
}
}
/**
* 设置错误信息
* element 错误容器
* message 错误信息
*/
function setErrInfo(element, message){
if((typeof element) == "object"){
element.innerHTML = (message == undefined || message == "") ? "*" : message;
}
}
/**
* 添加错误字串
* elName 发生错误的元素名称；
* errStr 错误字串标志；
*/
function addErrStr(elName){
if(errStr.indexOf(elName+";") == -1){
errStr = errStr + elName + ";";
}
}
/**
* 删除错误字串
* elName 发生错误的元素名称；
* errStr 错误字串标志；
*/
function delErrStr(elName){
if(errStr.indexOf(elName+";") > -1){
errStr = errStr.replace(elName+";", "");
}
}
/**
* 清除字串两端空格
*/
function trim(str){ //删除左右两端的空格
return str.replace(/(^\s*)|(\s*$)/g, "");
}
</script>
</head>
<body>
<form id="subform" method="post" action="/jsDispose.php" onsubmit="return formSubFn();">
姓名：<input type="text" name="xm">
<span class="error" id="xmErr">*</span>
<br><br>
电邮：<input type="text" name="email">
<span class="error" id="emailErr">*</span>
<br><br>
网址：<input type="text" name="website">
<span class="error" id="websiteErr"></span>
<br><br>
评论：<textarea name="comment" rows="5" cols="40"></textarea>
<br><br>
性别：
<input type="radio" name="gender" value="female">女性
<input type="radio" name="gender" value="male">男性
<span class="error" id="genderErr">*</span>
<br><br>
<input type="submit" name="submit" value="提交">
</form>
</body>
</html>
效果：
代码：
<!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=gbk" />
<title>JS客户端表单数据验证_2WorkRoom3</title>
<style>
.error {color: #FF0000;}
</style>
<script type="text/javascript">
/**
* JS客户端表单数据验证
* 1、非空验证
* 2、字符处理
* 3、格式规则
*/
// 错误容器声明
var xmErr,emailErr,websiteErr,genderErr;
// 参数变量声明
var xm,email,website,comment,gender;
// 错误名称字串：有错则加名称，没有则剪掉；
var errStr;
window.onload = function() {
// 错误容器初始化
xmErr = document.getElementById("xmErr");
emailErr = document.getElementById("emailErr");
websiteErr = document.getElementById("websiteErr");
genderErr = document.getElementById("genderErr");
// 参数变量初始化
xm = document.getElementsByName("xm")[0];
email = document.getElementsByName("email")[0];
website = document.getElementsByName("website")[0];
comment = document.getElementsByName("comment")[0];
gender = document.getElementsByName("gender");
document.getElementById("subform").reset();
}
// 客户端验证函数
function formSubFn() {
errStr = ""; // 初始化或是还原；
/// 非空验证、格式规则
// 姓名
if(!isEmpty(xm)) {
// 格式验证：只能为字母空格；
if(dataCheck("^[a-zA-Z ]*$", "i", xm.value)){
setErrInfo(xmErr);
delErrStr("xm");
}else{
setErrInfo(xmErr, "* 姓名只能为字母或者空号字符；");
addErrStr("xm");
}
}else {
setErrInfo(xmErr, "* 姓名不能为空；");
addErrStr("xm");
}
// 电邮
if(!isEmpty(email)) {
if(dataCheck("([\\w\\-]+\@[\\w\\-]+\\.[\\w\\-]+)", "ig", email.value)){
setErrInfo(emailErr);
delErrStr("email");
}else {
setErrInfo(emailErr, "* 邮件地址格式不正确；");
addErrStr("email");
}
}else {
setErrInfo(emailErr, "* 邮件地址不能为空；");
addErrStr("email");
}
// 性别
if(isEmpty(gender[0]) && isEmpty(gender[1])){
setErrInfo(genderErr, "* 性别不能为空；");
addErrStr("gender");
}else {
setErrInfo(genderErr, "*");
delErrStr("gender");
}
// 网址
if(!isEmpty(website)){
if(dataCheck("\\b(?:(?:https?|ftp):\\/\\/|www\\.)[-a-z0-9+&@#\\/%?=~_|!:,.;]*[-a-z0-9+&@#\\/%=~_|]", "i", website.value)){
setErrInfo(websiteErr, " ");
delErrStr("website");
}else {
setErrInfo(websiteErr, "网址格式不正确；");
addErrStr("website");
}
}
var isok = false;
if(errStr.length == 0){
isok = true;
}
console.log("->" + errStr);
return isok;
}
/**
* 格式验证
* regExpStr，正则表达式字串；
* attributes，正则表达式修饰符；
* value，值；
*/
function dataCheck(regExpStr, attributes, value){
var re = new RegExp(regExpStr, attributes);
//console.log("->regExpStr_" + regExpStr + " value_" + value);
return re.test(value);
}
/**
* 空值检查
*/
function isEmpty(element) {
if((typeof element) == "object"){
if(element.getAttribute("type") == "text" || element.toString() == "[object HTMLTextAreaElement]"){
// 文本框处理 或 文本区域
var val = trim(element.value);
if(val == ''){
return true;
}else {
return false;
}
}else if(element.getAttribute("type") == "radio"){
// 单选按钮处理
return !element.checked;
}
}
}
/**
* 设置错误信息
* element 错误容器
* message 错误信息
*/
function setErrInfo(element, message){
if((typeof element) == "object"){
element.innerHTML = (message == undefined || message == "") ? "*" : message;
}
}
/**
* 添加错误字串
* elName 发生错误的元素名称；
* errStr 错误字串标志；
*/
function addErrStr(elName){
if(errStr.indexOf(elName+";") == -1){
errStr = errStr + elName + ";";
}
}
/**
* 删除错误字串
* elName 发生错误的元素名称；
* errStr 错误字串标志；
*/
function delErrStr(elName){
if(errStr.indexOf(elName+";") > -1){
errStr = errStr.replace(elName+";", "");
}
}
/**
* 清除字串两端空格
*/
function trim(str){ //删除左右两端的空格
return str.replace(/(^\s*)|(\s*$)/g, "");
}
</script>
</head>
<body>
<form id="subform" method="post" action="/jsDispose.php" onsubmit="return formSubFn();">
姓名：<input type="text" name="xm">
<span class="error" id="xmErr">*</span>
<br><br>
电邮：<input type="text" name="email">
<span class="error" id="emailErr">*</span>
<br><br>
网址：<input type="text" name="website">
<span class="error" id="websiteErr"></span>
<br><br>
评论：<textarea name="comment" rows="5" cols="40"></textarea>
<br><br>
性别：
<input type="radio" name="gender" value="female">女性
<input type="radio" name="gender" value="male">男性
<span class="error" id="genderErr">*</span>
<br><br>
<input type="submit" name="submit" value="提交">
</form>
</body>
</html>
效果：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jsp+servlet更改模板
- JavaScript获取事件对象和目标对象
- js常用函数、书写可读性的js、js变量声明...
- js对象, 数组 , json 互相转换
- javascript的前世今生
- Javascript实现div层渐隐效果的方法
- js获取滚动距离的方法
- JSP jsp表达式 jsp代码片段 jsp中的声明 jsp的注释
- JSP errorPage
- JSP常用指令 include静态包含，copy到一个页面，只编译一个jsp文件
- 自定义属性之图片切换实例——初始化、实现切换效果——JS学习笔记2015-5-29（第42天）
- 一些自学的html/javascript代码（button,text及其调用函数用法）
- href="javascript:showinfo(this)"不存在
- ArcGIS api for JavaScript V3.13 lib&sdk离线部署
- JSON
- javascript学习过程中的一些体会和重点（1）
- json对象，动态添加，修改，删除示例
- javascript中字符串的比较及innerHTML和innerText的区别
- javascript事件触发器fireEvent和dispatchEvent
- javascript权威指南学习笔记（转载）