JS正则表达式验证表单
一.解释一些符号相关的意义
1. /^$/ 这个是个通用的格式。
^ 匹配输入字符串的开始位置;$匹配输入字符串的结束位置
2. 里面输入需要实现的功能。
* 匹配前面的子表达式零次或多次;
+ 匹配前面的子表达式一次或多次;
?匹配前面的子表达式零次或一次;
\d 匹配一个数字字符,等价于[0-9]
二、常用的表单验证代码
checkUserNameflag=false;
checkPasswordflag=false;
checkPasswordAgianflag=false;
checkEmailflag=false;
// 用户名校验
function checkUserName() {
var username = $("userNeme").value;
var zz = /^[A-Za-z0-9]{6,}$/;
if (!zz.test(username)) {
$("userName_warn").innerHTML = " × 用户名不符合规范";
checkUserNameflag=false;
} else {
/*$("userName_warn").style.color='blue';
$("userName_warn").innerHTML = "√ 用户名可用";*/
showUserExist(username);
checkUserNameflag=true;
}
} //重置提示
function resetWarn(){
$("userName_warn").innerHTML="";
$("email_warn").innerHTML="";
$("password_warn").innerHTML="";
$("Repassword_warn").innerHTML="";
}
// 密码校验
function checkPassword() {
var password1 = $("password").value;
if (password1.length >= 6 && password1.length <= 15) {
checkPasswordflag = true;
$("password_warn").style.color='blue';
$("password_warn").innerHTML = " √ 密码可用 ";
checkAgianMiMa();
} else {
checkPasswordflag = false;
$("password_warn").innerHTML = " × 密码至少为 6 个字符 ";
}
} function checkPasswordAgian() {
var password1 = $("password").value;
var password2 = $("rePassword").value;
if (password1 == password2) {
if (password1 == "") {
$("Repassword_warn").innerHTML = " × 请输入密码 ";
checkPasswordAgianflag = false;
return;
} $("Repassword_warn").style.color='blue';
$("Repassword_warn").innerHTML = "√ 重复输入密码正确";
checkPasswordAgianflag = true;
} else {
checkPasswordAgianflag = false;
$("Repassword_warn").innerHTML = " × 两次密码输入不同 "; }
} function checkEmail(){
//对电子邮件的验证
var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
var email=$("email").value;
if(!myreg.test(email)){
checkEmailflag=false;
$("email_warn").style.color='red';
$("email_warn").innerHTML = " × 邮箱格式不符合规范";
} else {
checkEmailflag=true;
$("email_warn").style.color='blue';
$("email_warn").innerHTML = "√ 邮箱格式正确";
}
} function submitCheck(){
alert(checkUserNameflag);
if(checkUserNameflag==false || checkPasswordflag==false || checkPasswordflag==false
||checkPasswordAgianflag==false || checkEmailflag==false){
return;
}
}
function $(id){
return document.getElementById(id);
}
JS正则表达式验证表单的更多相关文章
- JavaScript---通过正则表达式验证表单输入
验证输入的name只能是数字或字母或下划线 js <script type="text/javascript"> function submitOn(){ var f ...
- 饿了么组件库element-ui正则表达式验证表单,后端验证表单。
前言 老是遇到一些朋友问一些element-ui组件使用相关的基础问题,因为官方文档上并没有提供所有琐碎的功能代码demo.从这里开始我会根据我实际遇到的问题记录一些常见的官方文档没有详述的功能代码, ...
- js正则表达式处理表单
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...
- javascript 常用的正则表达式验证表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因
jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因 今天利用了jquery.validate.js来验证表单,发现在火狐.谷歌浏览器当中都可以进行验证,但是在IE系列浏 ...
- jquery.validate验证表单
添加引用 <script src="/${appName}/commons/js/validate/jquery.validate.min.js"></scrip ...
- JS高级---案例:验证表单
案例:验证表单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- js验证表单大全
js验证表单大全 1. 长度限制 <script> function test() { if(document.a.b.value.length>50) { alert(" ...
- js/jquery/插件表单验证
媳妇要学js,就收集一些资料给她. 1.js 表单验证 : http://hi.baidu.com/yanchao0901/item/161f563fb84ea5433075a1eb 2.jquery ...
随机推荐
- Django里,如何更改ADMIN管理后台的显示
今天在慢慢完善管理后台的一些体验, 第一是要扩展默认显示类,就是现在弄的. 第二是要让一些显示框更自然友好,这是下一次要作的. 在各个app的admin.py里,加入相关的MIXIN类 class S ...
- php数组遍历 使用foreach
<?php $url = array ( '新浪' =>'www.sina.com' , '雅虎' =>'www.yahoo.com' , '网易' =>'www.163.co ...
- 服务器部署_centos 安装nginx手记
前言: a.linux上安装nginx网上有很多文章,本文仅仅是自己整理备忘. b.安装centos的时候,把develop相关组件都装上,免得缺这个缺哪个. c. 本文软件版本:nginx-1.2. ...
- configure文件中判断某函数或库是否存在的一个方法
echo " #include<stdio.h> #include<openssl/ssl.h> int main() { return 0; } " &g ...
- URAL1635. Mnemonics and Palindromes(DP)
链接 先初始化一下所有的回文串 再O(n*n)DP 输出路径dfs 刚开始存所有回文 ME了 后来发现用不着 改了改了OK了 数据还挺强 #include <iostream> #incl ...
- arch Linux not found device 错误解决
使用Archlinux LiveCD mount /dev.sda1 /mnt (有boot分区的挂boot) Running mkinitcpio -p linux Running grub-mkc ...
- 从头开始编写一个Orchard网上商店模块(3) - 创建Orchard.Webshop模块项目
原文地址:http://skywalkersoftwaredevelopment.net/blog/writing-an-orchard-webshop-module-from-scratch-par ...
- BrnShop开源网上商城第三讲:插件的工作机制
这几天BrnShop的开发工作比较多,所以这一篇文章来的晚了一些,还请大家见谅呀!还有通知大家一下BrnShop1.0.312版本已经发布,此版本添加了报表统计等新功能,需要源码的园友可以点此下载.好 ...
- 解决Dagger2和butterknife冲突
dagger2 和 RxJava butterknife 以及 Retrofit使用起来非常酸爽 代码非常干净清晰 动手尝试 配置编译 DaggerAppComponent的时候 出现问题 配置dag ...
- spring--注解注入--12
12.1 概述 12.1.1 什么是零配置 在SSH集成一章中大家注意到项目结构和包结构是不是很有规律,类库放到WEB-INF/lib文件夹下,jsp文件放到WEB-INF/jsp文件夹下,web ...