JS简单表单验证功能完整示例
本文实例讲述了JS简单表单验证功能。分享给大家供大家参考，具体如下：
简单js表单验证demo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script>
//当用户名获取焦点时
function focus_username(){
document.getElementById("user_res").innerHTML="<font color='#f00'>请输入用户名</font>";
}
//当用户名失去焦点时
function blur_username(){
var user_value=document.getElementsByName("username")[0].value;
if(user_value.length===0){
document.getElementById("user_res").innerHTML="<font color='#f00'>你没有输入用户名</font>";
return false;
//判断其长度是否在5~18之间 如果不在就提示用户
}else if(user_value.length<5||user_value.length>18)
{
document.getElementById("user_res").innerHTML="<font color='#f00'>用户名长度必须在5-18之间</font>";
return false;
}else if(!checkUser(user_value)){
//用户名还有特殊符号
document.getElementById("user_res").innerHTML="<font color='#f00'>用户名含有特殊符号</font>";
return false;
}else{
//用户名合法
document.getElementById("user_res").innerHTML="<font color='#00f'>用户名合法</font>";
return true;
}
}
//密码获取焦点时
function focus_password(){
document.getElementById("pass_res").innerHTML="<font color='#f00'>请输入密码</font>";
}
//密码失去焦点时
function blur_password(){
var user_value=document.getElementsByName("password")[0].value;
if(user_value.length===0){
document.getElementById("pass_res").innerHTML="<font color='#f00'>你没有输入密码</font>";
return false;
//判断其长度是否在5~18之间 如果不在就提示用户
}else if(user_value.length<5||user_value.length>18)
{
document.getElementById("pass_res").innerHTML="<font color='#f00'>用密码长度必须在5-18之间</font>";
return false;
}else{
//密码合法
document.getElementById("pass_res").innerHTML="<font color='#00f'>密码合法</font>";
return true;
}
}
function checkUser(user){
var arr=["<",">","#","?","%"];
var arr_length=arr.length;
var user_length=user.length;
for(var i=0;i<arr_length;i++){
for(var j=0;j<user_length;j++){
if(arr[i]===user.charAt(j)){
return false;
}
}
}
//表示用户名合法
return true;
}
//提交提交表单验证
function checkForm(){
var user_flag=blur_username();
var pass_flag=blur_password();
if(user_flag && pass_flag){
alert("提交合法表单");
return true;
}else{
alert("输入不合法");
return false;
}
}
</script>
</head>
<body>
<!--action 参数自定义跳转页面-->
<form name='form1' onsubmit='return checkForm()' action='index.php'>
<table width='600' align='center'>
<tr>
<td align='right' width='150'>用户名:</td>
<td width='100'><input type='text' name='username' onfocus='focus_username()' onblur = 'blur_username()'/></td>
<td><span id="user_res"></span></td>
</tr>
<tr>
<td align='right' width='100'>密码:</td>
<td width='100'><input type='password' name='password' onfocus='focus_password()' onblur = 'blur_password()'/></td>
<td><span id="pass_res"></span></td>
</tr>
<tr>
<td></td>
<td><input type='submit' value='提交' /></td>
</tr>
</table>
</form>
</body>
</html>
运行结果：
PS：这里再为大家提供2款非常方便的正则表达式工具供大家参考使用：
JavaScript正则表达式在线测试工具：
http://tools.jb51.net/regex/javascript
正则表达式在线生成工具：
http://tools.jb51.net/regex/create_reg
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript正则表达式技巧大全》、《JavaScript表单(form)操作技巧大全》、《JavaScript数据结构与算法技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
收藏的js表单验证控制代码大全第1/3页
关键字:js验证表单大全,用JS控制表单提交 ,javascript提交表单: 目录: 1:js 字符串长度限制.判断字符长度 .js限制输入.限制不能输入.textarea 长度限制 2.:js判断汉字.判断是否汉字 .只能输入汉字 3:js判断是否输入英文.只能输入英文 4:js只能输入数字,判断数字.验证数字.检测数字.判断是否为数字.只能输入数字 5:只能输入英文字符和数字 6: js email验证 .js 判断email .信箱/邮箱格式验证 7:js字符过滤,屏蔽关键字 8:js
-
最常用的15个前端表单验证JS正则表达式
在表单验证中,使用正则表达式来验证正确与否是一个很频繁的操作,本文收集整理了15个常用的JavaScript正则表达式,其中包括用户名.密码强度.整数.数字.电子邮件地址(Email).手机号码.身份证号.URL地址. IPv4地址. 十六进制颜色. 日期. QQ号码. 微信号.车牌号.中文正则. 1 用户名正则 //用户名正则,4到16位(字母,数字,下划线,减号) var uPattern = /^[a-zA-Z0-9_-]{4,16}$/; //输出 true console.log(uP
-
js 常用正则表达式表单验证代码
正则表达式使用详解 简介 简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.其作用如下:测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一个信用卡号码模式.这称为数据有效性验证.替换文本.可以在文档中使用一个正则表达式来标识特定文字,然后可以全部将其删除,或者替换为别的文字.根据模式匹配从字符串中提取一个子字符串.可以用来在文本或输入字段中查找特定文字. 基本语法 在对正则表达式的功能和作用有了初步的了解之后,我们就来具体看一下正则表
-
javascript表单验证 - Parsley.js使用和配置
在线演示 大家还记得我们曾经介绍过的表单验证jquery插件jquery.validationEngine吧,使用这个插件你不需要写任何一行js代码就可以生成一个功能强大的表单验证功能.是不是超棒? 今天介绍的Parsley同样也可以帮助你只使用简单的配置即可实现表单验证功能,基于它的强大DOM-API. 主要特性 •基于超棒的用户体验 •超级方便配置 •超轻量级(压缩后12K),支持jQuery和Zepto •超简单,只需要简单配置DOM-API,类似jQuery的data API •绝对免费
-
JS实现的简单表单验证功能完整实例
本文实例讲述了JS实现的简单表单验证功能.分享给大家供大家参考,具体如下: <!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&
-
javascript制作的简单注册模块表单验证
一个注册框 进行表单验证处理 如图 有简单的验证提示功能 代码思路也比较简单 输入框失去焦点时便检测,并进行处理 表单具有 onsubmit = "return check()"行为,处理验证情况 点击提交表单按钮时,进行最终的验证,达到是否通过表单提交的请求. 先是最基本的html+css部分 <style type="text/css"> body{margin:0;padding: 0;} .login{position:relative;mar
-
JS实现的通用表单验证插件完整实例
本文实例讲述了JS实现的通用表单验证插件.分享给大家供大家参考.具体如下: 这里演示一个通用的JS表单验证插件代码.使用方法:第一步:需设定表单项数据类型,第二步:实例表单验证,验证错误提示说明(程序有自带相关错误提示,可自定义每项验证错误提示时文本,只需添加msg). 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-normal-table-check-plug-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &qu
-
JavaScript表单验证实例之验证表单项是否为空
表单验证几乎在每一个需要注册或者登陆的网站是必不可少的,有些验证则非常的复杂,可以说是各种各样给你的要求,不过本章节只介绍一下表单中最简单的验证方式,就是判断是否为空,有些要求比较低的网站对此已经满足需要了. 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://ww
-
JavaScript 使用正则表达式进行表单验证的示例代码
JavaScript 表单验证正则表达式大全利用正则表达式判断是否是0-9的阿拉伯数字 复制代码 代码如下: function regIsDigit(fData) { var reg = new RegExp("^[0-9]$"); return (reg.test(fData)); } 利用这则表达式获取字符串的长度 复制代码 代码如下: function regDataLength(fData) { var valLength = fData.length; var reg = n
-
javascript表单验证使用示例(javascript验证邮箱)
被 JavaScript 验证的这些典型的表单数据有: 用户是否已填写表单中的必填项目?用户输入的邮件地址是否合法?用户是否已输入合法的日期?用户是否在数据域 (numeric field) 中输入了文本?必填(或必选)项目 下面的函数用来检查用户是否已填写表单中的必填(或必选)项目.假如必填或必选项为空,那么警告框会弹出,并且函数的返回值为 false,否则函数的返回值则为 true(意味着数据没有问题): 复制代码 代码如下: function validate_required(field
-
JavaScript表单验证完美代码
用原生JS写一个简单的表单验证 首先,是html部分 <div class="divAll"> <div id="titles">新用户注册</div> <div id="contents"> <h3>基本信息</h3> <hr width="95%" color="#f2f2f2"/> <form action=&q