首页 > 代码库 > 表单验证
表单验证
1、验证小例子
//表单验证
function checkForm(){
function checkForm(){
//01.验证用户名
var userName=getById("userName");
if(userName.valuehttp://www.mamicode.com/==""){
alert("用户名不能为空!")
userName.focus(); //让文本框获取焦点
return false;
}
//02.验证密码
var pwd=getById("pwd");
if(pwd.value.length<6){
alert("密码不能小于6位!")
pwd.focus(); //让文本框获取焦点
return false;
}
//03.验证密码和重复密码是否一致
var repwd=getById("repwd");
if(repwd.value!=pwd.value){
alert("两次密码不一致!")
repwd.focus(); //让文本框获取焦点
return false;
}
//04.验证昵称
var nickName=getById("nickName");
if(nickName.valuehttp://www.mamicode.com/==""){
alert("昵称不能为空!")
nickName.focus(); //让文本框获取焦点
return false;
}
//05.验证邮箱
var email=getById("email");
if(email.value.indexOf("@")==-1||email.value.indexOf(".")==-1){
alert("邮箱格式不正确!")
email.focus(); //让文本框获取焦点
return false;
}
var userName=getById("userName");
if(userName.valuehttp://www.mamicode.com/==""){
alert("用户名不能为空!")
userName.focus(); //让文本框获取焦点
return false;
}
//02.验证密码
var pwd=getById("pwd");
if(pwd.value.length<6){
alert("密码不能小于6位!")
pwd.focus(); //让文本框获取焦点
return false;
}
//03.验证密码和重复密码是否一致
var repwd=getById("repwd");
if(repwd.value!=pwd.value){
alert("两次密码不一致!")
repwd.focus(); //让文本框获取焦点
return false;
}
//04.验证昵称
var nickName=getById("nickName");
if(nickName.valuehttp://www.mamicode.com/==""){
alert("昵称不能为空!")
nickName.focus(); //让文本框获取焦点
return false;
}
//05.验证邮箱
var email=getById("email");
if(email.value.indexOf("@")==-1||email.value.indexOf(".")==-1){
alert("邮箱格式不正确!")
email.focus(); //让文本框获取焦点
return false;
}
}
// 传一个id 返回一个dom对象
function getById(obj){
return document.getElementById(obj);
}
// 传一个id 返回一个dom对象
function getById(obj){
return document.getElementById(obj);
}
2、即时验证
/**value
* Created by honglin.jiang on 2014/10/14.
*/
//获取DOM对象
function e(str){
return document.getElementById(str);
}
//动态添加有样式的内容
//ok_prompt 为提示文字验证正确的className
//error_prompt 为提示文字验证错误时className
//import_prompt 为提示文字提示时className
* Created by honglin.jiang on 2014/10/14.
*/
//获取DOM对象
function e(str){
return document.getElementById(str);
}
//动态添加有样式的内容
//ok_prompt 为提示文字验证正确的className
//error_prompt 为提示文字验证错误时className
//import_prompt 为提示文字提示时className
function appendHtml(obj,str,className){
obj.innerHTML = str;
obj.className = className;
}
//验证表单
function checkForm(){
//把所有的验证 写成一个数组
var ids=["checkUserName()","checkPwd()","checkRepwd()","checkNikeName()","checkTel()","checkEmail()"];
//定义变量 记录 返回true的方法
var num=0;
for(var i=0;i<ids.length;i++){
if(eval(ids[i])){
num++;
}
}
//所有的验证都通过 才是表单提交
return (ids.length==num)?true:false;
obj.innerHTML = str;
obj.className = className;
}
//验证表单
function checkForm(){
//把所有的验证 写成一个数组
var ids=["checkUserName()","checkPwd()","checkRepwd()","checkNikeName()","checkTel()","checkEmail()"];
//定义变量 记录 返回true的方法
var num=0;
for(var i=0;i<ids.length;i++){
if(eval(ids[i])){
num++;
}
}
//所有的验证都通过 才是表单提交
return (ids.length==num)?true:false;
}
//获得鼠标时触发的事件
//import_prompt 为提示文字提示时className
function focusShow(inputId,msg){
var dom =e(inputId); //获取dom对象
var dmsg =e(inputId+"Id"); //获取提示信息的dom对象
dmsg.style.borderColor="green";
appendHtml(dmsg,msg,"import_prompt");
}
//验证用户名输入
function checkUserName(){
var flag=false;
var userName= e("userName");
var userNameId= e("userNameId");
if(userName.valuehttp://www.mamicode.com/==""){
userName.style.borderColor="red";
appendHtml(userNameId,"用户名不能为空","error_prompt");
}else{
userName.style.borderColor="green";
appendHtml(userNameId,"输入正确","ok_prompt");
flag=true;
}
return flag;
}
//获得鼠标时触发的事件
//import_prompt 为提示文字提示时className
function focusShow(inputId,msg){
var dom =e(inputId); //获取dom对象
var dmsg =e(inputId+"Id"); //获取提示信息的dom对象
dmsg.style.borderColor="green";
appendHtml(dmsg,msg,"import_prompt");
}
//验证用户名输入
function checkUserName(){
var flag=false;
var userName= e("userName");
var userNameId= e("userNameId");
if(userName.valuehttp://www.mamicode.com/==""){
userName.style.borderColor="red";
appendHtml(userNameId,"用户名不能为空","error_prompt");
}else{
userName.style.borderColor="green";
appendHtml(userNameId,"输入正确","ok_prompt");
flag=true;
}
return flag;
}
//验证密码
function checkPwd(){
var flag=false;
var pwd= e("pwd");
var pwdId= e("pwdId");
if(pwd.valuehttp://www.mamicode.com/==""){
pwd.style.borderColor="red";
appendHtml(pwdId,"密码不能为空","error_prompt");
}else{
pwd.style.borderColor="green";
appendHtml(pwdId,"输入正确","ok_prompt");
flag=true;
}
return flag;
}
//验证重复密码
function checkRepwd(){
var flag = true;
var odom = e("repwd");//输入框DOM对象
var omsg = e("repwdId");//信息提示DOM对象
if(odom.value =http://www.mamicode.com/=""){
odom.style.borderColor = "red";
appendHtml(omsg,"确认密码不能为空","error_prompt");
flag = false;
}else if(odom.value != e("pwd").value){
odom.style.borderColor = "red";
appendHtml(omsg,"两次输入的密码不一致","error_prompt");
flag = false;
} else{
odom.style.borderColor = "green";
appendHtml(omsg,"输入正确","ok_prompt");
flag = true;
}
return flag;
}
function checkPwd(){
var flag=false;
var pwd= e("pwd");
var pwdId= e("pwdId");
if(pwd.valuehttp://www.mamicode.com/==""){
pwd.style.borderColor="red";
appendHtml(pwdId,"密码不能为空","error_prompt");
}else{
pwd.style.borderColor="green";
appendHtml(pwdId,"输入正确","ok_prompt");
flag=true;
}
return flag;
}
//验证重复密码
function checkRepwd(){
var flag = true;
var odom = e("repwd");//输入框DOM对象
var omsg = e("repwdId");//信息提示DOM对象
if(odom.value =http://www.mamicode.com/=""){
odom.style.borderColor = "red";
appendHtml(omsg,"确认密码不能为空","error_prompt");
flag = false;
}else if(odom.value != e("pwd").value){
odom.style.borderColor = "red";
appendHtml(omsg,"两次输入的密码不一致","error_prompt");
flag = false;
} else{
odom.style.borderColor = "green";
appendHtml(omsg,"输入正确","ok_prompt");
flag = true;
}
return flag;
}
//验证昵称
function checkNikeName(){
var flag = true;
var odom = e("nickName");//输入框DOM对象
var omsg = e("nickNameId");//信息提示DOM对象
if(odom.value =http://www.mamicode.com/=""){
odom.style.borderColor = "red";
appendHtml(omsg,"昵称不能为空,请输入昵称","error_prompt");
flag = false;
}else{
odom.style.borderColor = "green";
appendHtml(omsg,"输入正确","ok_prompt");
flag = true;
}
return flag;
}
function checkNikeName(){
var flag = true;
var odom = e("nickName");//输入框DOM对象
var omsg = e("nickNameId");//信息提示DOM对象
if(odom.value =http://www.mamicode.com/=""){
odom.style.borderColor = "red";
appendHtml(omsg,"昵称不能为空,请输入昵称","error_prompt");
flag = false;
}else{
odom.style.borderColor = "green";
appendHtml(omsg,"输入正确","ok_prompt");
flag = true;
}
return flag;
}
//验证手机
function checkTel(){
var flag = true;
var odom = e("tel");//输入框DOM对象
var omsg = e("telId");//信息提示DOM对象
if(odom.value =http://www.mamicode.com/=""){
odom.style.borderColor = "red";
appendHtml(omsg,"关联手机号码不能为空,请输入关联手机号码","error_prompt");
flag = false;
}else{
odom.style.borderColor = "green";
appendHtml(omsg,"输入正确","ok_prompt");
flag = true;
}
return flag;
}
//验证邮箱
function checkEmail(){
var flag = true;
var odom = e("email");//输入框DOM对象
var omsg = e("emailId");//信息提示DOM对象
if(odom.value =http://www.mamicode.com/=""){
odom.style.borderColor = "red";
appendHtml(omsg,"保密邮箱不能为空,请输入保密邮箱","error_prompt");
flag = false;
}else if( odom.value.indexOf("@")==-1 || odom.value.indexOf(".")==-1 ){
odom.style.borderColor = "red";
appendHtml(omsg,"邮件格式必须包含@和.","error_prompt");
flag = false;
}else{
odom.style.borderColor = "green";
appendHtml(omsg,"输入正确","ok_prompt");
flag = true;
}
return flag;
}
function checkTel(){
var flag = true;
var odom = e("tel");//输入框DOM对象
var omsg = e("telId");//信息提示DOM对象
if(odom.value =http://www.mamicode.com/=""){
odom.style.borderColor = "red";
appendHtml(omsg,"关联手机号码不能为空,请输入关联手机号码","error_prompt");
flag = false;
}else{
odom.style.borderColor = "green";
appendHtml(omsg,"输入正确","ok_prompt");
flag = true;
}
return flag;
}
//验证邮箱
function checkEmail(){
var flag = true;
var odom = e("email");//输入框DOM对象
var omsg = e("emailId");//信息提示DOM对象
if(odom.value =http://www.mamicode.com/=""){
odom.style.borderColor = "red";
appendHtml(omsg,"保密邮箱不能为空,请输入保密邮箱","error_prompt");
flag = false;
}else if( odom.value.indexOf("@")==-1 || odom.value.indexOf(".")==-1 ){
odom.style.borderColor = "red";
appendHtml(omsg,"邮件格式必须包含@和.","error_prompt");
flag = false;
}else{
odom.style.borderColor = "green";
appendHtml(omsg,"输入正确","ok_prompt");
flag = true;
}
return flag;
}
3、正则表达式验证用户名
<script type="text/javascript">
function checkForm(){
var userName= document.getElementById("userName");
//书写正则表达式 用户名只能是字母或者数字并且在4到16个长度 包含4,16
var reg="^[a-zA-Z0-9]{4,16}$";
//var reg1="^[a-zA-Z0-9]?$";
var regExp=new RegExp(reg);
alert( regExp.test(userName.value)?"用户名正确":"不匹配");
}
</script>
</head>
<body>
<form onsubmit="return checkForm()">
<input type="text" name="userName" id="userName">
<input type="submit" value="http://www.mamicode.com/验证">
</form>
</body>
4、正则表达式验证邮箱
function checkForm(){
var userName= document.getElementById("userName");
//书写正则表达式 用户名只能是字母或者数字并且在4到16个长度 包含4,16
var reg="^[a-zA-Z0-9]{4,16}$";
//var reg1="^[a-zA-Z0-9]?$";
var regExp=new RegExp(reg);
alert( regExp.test(userName.value)?"用户名正确":"不匹配");
}
</script>
</head>
<body>
<form onsubmit="return checkForm()">
<input type="text" name="userName" id="userName">
<input type="submit" value="http://www.mamicode.com/验证">
</form>
</body>
4、正则表达式验证邮箱
<script type="text/javascript">
function checkForm(){
var email= document.getElementById("email");
//书写正则表达式 邮箱
var reg=/^\w+@\w+(\.\w+){1,2}$/;
var regExp=new RegExp(reg);
alert( regExp.test(email.value)?"邮箱正确":"不匹配");
}
</script>
</head>
<body>
<form onsubmit="return checkForm()">
<input type="text" name="email" id="email">
<input type="submit" value="http://www.mamicode.com/验证">
</form>
</body>
5、正则表达式验证手机号
function checkForm(){
var email= document.getElementById("email");
//书写正则表达式 邮箱
var reg=/^\w+@\w+(\.\w+){1,2}$/;
var regExp=new RegExp(reg);
alert( regExp.test(email.value)?"邮箱正确":"不匹配");
}
</script>
</head>
<body>
<form onsubmit="return checkForm()">
<input type="text" name="email" id="email">
<input type="submit" value="http://www.mamicode.com/验证">
</form>
</body>
5、正则表达式验证手机号
<title>正则验证手机号</title>
<script type="text/javascript">
function checkForm(){
var phone= document.getElementById("phone");
//书写正则表达式 手机
var reg=/^(13|14|15|17|18)\d{9}$/;
var regExp=new RegExp(reg);
alert( regExp.test(phone.value)?"手机号正确":"不匹配");
}
</script>
</head>
<body>
<form onsubmit="return checkForm()">
<input type="text" name="phone" id="phone">
<input type="submit" value="http://www.mamicode.com/验证">
</form>
</body>
6、正则与String对象
<script type="text/javascript">
function checkForm(){
var phone= document.getElementById("phone");
//书写正则表达式 手机
var reg=/^(13|14|15|17|18)\d{9}$/;
var regExp=new RegExp(reg);
alert( regExp.test(phone.value)?"手机号正确":"不匹配");
}
</script>
</head>
<body>
<form onsubmit="return checkForm()">
<input type="text" name="phone" id="phone">
<input type="submit" value="http://www.mamicode.com/验证">
</form>
</body>
6、正则与String对象
<script type="text/javascript">
window.onload=function(){
var str="this is a big dog!";
//alert(str.match(/big/));查找 str 字符串中的 "big" 字符串
//alert(str.search(/i/));查找 str 字符串中的 "i" 字符串所在的位置
//alert(str.replace(/i/g,"I"));把str字符串中的 i 字符替换成 大写的 I 字符
//alert(str.replace("i","I"));
//alert(str.split(" ")); 把str字符串中的按空格进行分割 返回数组
alert(str.split(/\s+/));
}
</script>
</head>
<body>
</body>
window.onload=function(){
var str="this is a big dog!";
//alert(str.match(/big/));查找 str 字符串中的 "big" 字符串
//alert(str.search(/i/));查找 str 字符串中的 "i" 字符串所在的位置
//alert(str.replace(/i/g,"I"));把str字符串中的 i 字符替换成 大写的 I 字符
//alert(str.replace("i","I"));
//alert(str.split(" ")); 把str字符串中的按空格进行分割 返回数组
alert(str.split(/\s+/));
}
</script>
</head>
<body>
</body>
表单验证
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。