客户端JavaScript正则表达式校验证用户登录名/密码,用户注册信息的校验

这种的不是ajax的校验;

是格式的校验;

用法是,用户提交的时候,先用下面的正则验证格式是否正确,如果正确再进行AJAX的验证;

如果不正确,直接提示;

具体需要以不同项目为准,但是国内大概都是下面的这种,

大同小异的,只需要做简单的修改即可适配到您的项目中去了;

//校验登录名:只能输入5-20个以字母开头、可带数字、“_”、“.”的字串
function isRegisterUserName(s) {
var patrn=/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/;
if (!patrn.exec(s)) {
return false
}
return true
}
//校验用户姓名:只能输入1-30个以字母开头的字串
function isTrueName(s) {
var patrn=/^[a-zA-Z]{1,30}$/;
if (!patrn.exec(s)) {
return false
}
return true
}

//校验密码:只能输入6-20个字母、数字、下划线
function isPasswd(s) {
var patrn=/^(\w){6,20}$/;
if (!patrn.exec(s)){
return false
}
return true
}

下面是一个登陆名的校验DEMO

/*  
* 登录名校验方法
*/
function validateLoginname() {
var id = "loginname";
var value = $("#" + id).val();//获取输入框内容
/*
* 1. 非空校验
*/
if(!value) {
/*
* 获取对应的label
* 添加错误信息
* 显示label
*/
$("#" + id + "Error").text("用户名不能为空!");
showError($("#" + id + "Error"));
return false;
}
/*
* 2. 长度校验
*/
if(value.length < 3 || value.length > 20) {
/*
* 获取对应的label
* 添加错误信息
* 显示label
*/
$("#" + id + "Error").text("用户名长度必须在3 ~ 20之间!");
showError($("#" + id + "Error"));
false;
}
/*
* 3. 是否注册校验
*/
$.ajax({
url:"/goods/UserServlet",//要请求的servlet
data:{method:"ajaxValidateLoginname", loginname:value},//给服务器的参数
type:"POST",
dataType:"json",
async:false,//是否异步请求,如果是异步,那么不会等服务器返回,我们这个函数就向下运行了。
cache:false,
success:function(result) {
if(!result) {//如果校验失败
$("#" + id + "Error").text("用户名已被注册!");
showError($("#" + id + "Error"));
return false;
}
}
});
return true;
}

另外一种的写法

/*  
* 校验登录名
*/
function validateLoginname() {
var bool = true;
$("#loginnameError").css("display", "none");
var value = $("#loginname").val();
if(!value) {// 非空校验
$("#loginnameError").css("display", "");
$("#loginnameError").text("用户名不能为空!");
bool = false;
} else if(value.length < 3 || value.length > 20) {//长度校验
$("#loginnameError").css("display", "");
$("#loginnameError").text("用户名长度必须在3 ~ 20之间!");
bool = false;
}
return bool;
}

登陆密码的校验

/*  
* 登录密码校验方法
*/
function validateLoginpass() {
var id = "loginpass";
var value = $("#" + id).val();//获取输入框内容
/*
* 1. 非空校验
*/
if(!value) {
/*
* 获取对应的label
* 添加错误信息
* 显示label
*/
$("#" + id + "Error").text("密码不能为空!");
showError($("#" + id + "Error"));
return false;
}
/*
* 2. 长度校验
*/
if(value.length < 3 || value.length > 20) {
/*
* 获取对应的label
* 添加错误信息
* 显示label
*/
$("#" + id + "Error").text("密码长度必须在3 ~ 20之间!");
showError($("#" + id + "Error"));
false;
}
return true;
}

另外一种写法DEMO

/*  
* 校验密码
*/
function validateLoginpass() {
var bool = true;
$("#loginpassError").css("display", "none");
var value = $("#loginpass").val();
if(!value) {// 非空校验
$("#loginpassError").css("display", "");
$("#loginpassError").text("密码不能为空!");
bool = false;
} else if(value.length < 3 || value.length > 20) {//长度校验
$("#loginpassError").css("display", "");
$("#loginpassError").text("密码长度必须在3 ~ 20之间!");
bool = false;
}
return bool;
}

确认密码的校验

/*  
* 确认密码校验方法
*/
function validateReloginpass() {
var id = "reloginpass";
var value = $("#" + id).val();//获取输入框内容
/*
* 1. 非空校验
*/
if(!value) {
/*
* 获取对应的label
* 添加错误信息
* 显示label
*/
$("#" + id + "Error").text("确认密码不能为空!");
showError($("#" + id + "Error"));
return false;
}
/*
* 2. 两次输入是否一致校验
*/
if(value != $("#loginpass").val()) {
/*
* 获取对应的label
* 添加错误信息
* 显示label
*/
$("#" + id + "Error").text("两次输入不一致!");
showError($("#" + id + "Error"));
false;
}
return true;
}

另外一种的写法

/*  
* 校验确认密码
*/
function validateReloginpass() {
var bool = true;
$("#reloginpassError").css("display", "none");
var value = $("#reloginpass").val();
if(!value) {// 非空校验
$("#reloginpassError").css("display", "");
$("#reloginpassError").text("确认密码不能为空!");
bool = false;
} else if(value != $("#newpass").val()) {//两次输入是否一致
$("#reloginpassError").css("display", "");
$("#reloginpassError").text("两次密码输入不一致!");
bool = false;
}
return bool;
}

校验新密码的DEMO


// 校验新密码
function validateNewpass() {
var bool = true;
$("#newpassError").css("display", "none");
var value = $("#newpass").val();
if(!value) {// 非空校验
$("#newpassError").css("display", "");
$("#newpassError").text("新密码不能为空!");
bool = false;
} else if(value.length < 3 || value.length > 20) {//长度校验
$("#newpassError").css("display", "");
$("#newpassError").text("新密码长度必须在3 ~ 20之间!");
bool = false;
}
return bool;
}

Email的校验

/*  
* Email校验方法
*/
function validateEmail() {
var id = "email";
var value = $("#" + id).val();//获取输入框内容
/*
* 1. 非空校验
*/
if(!value) {
/*
* 获取对应的label
* 添加错误信息
* 显示label
*/
$("#" + id + "Error").text("Email不能为空!");
showError($("#" + id + "Error"));
return false;
}
/*
* 2. Email格式校验
*/
if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(value)) {
/*
* 获取对应的label
* 添加错误信息
* 显示label
*/
$("#" + id + "Error").text("错误的Email格式!");
showError($("#" + id + "Error"));
false;
}
/*
* 3. 是否注册校验
*/
$.ajax({
url:"/goods/UserServlet",//要请求的servlet
data:{method:"ajaxValidateEmail", email:value},//给服务器的参数
type:"POST",
dataType:"json",
async:false,//是否异步请求,如果是异步,那么不会等服务器返回,我们这个函数就向下运行了。
cache:false,
success:function(result) {
if(!result) {//如果校验失败
$("#" + id + "Error").text("Email已被注册!");
showError($("#" + id + "Error"));
return false;
}
}
});
return true;
}

下面是网上看到比较次的写法

要求用户名由3-10位的字母、数字和下划线组成,密码由6-20位的字母、数字、下划线和点“.”组成并且首字符为字母,这时就需要对用户的输入进行判断,写了两个函数,分别用于验证用户输入的用户名和密码是否合法。

技术要点

验证用户名是否由3-10位的字母、数字和下划线组成的正则表达式如下:

/^(\w){3,10}$/

验证密码是否由6-20位的字母、数字、下划线和点“.”组成的正则表达式如下:

/^[A-Za-z]{1}([A-Za-z0-9]|[._]){5,19}$/

(1)使用JavaScript编写一个用于验证用户名是否合法的函数checkeusername (),该函数只有一个参数username,用于获取输入的用户名,返回值为true或false。代码如下:

function checkeusername(username){
var str=username;
//在JavaScript中,正则表达式只能使用"/"开头和结束,不能使用双引号
var Expression=/^(\w){3,10}$/;
var objExp=new RegExp(Expression); //创建正则表达式对象
if(objExp.test(str)==true){ //通过正则表达式验证
return true;
}else{
return false;
}
}

(2)使用JavaScript编写一个用于验证密码是否合法的函数checkePWD(),该函数只有一个参数PWD,用于获取输入的密码,返回值为true或false。代码如下:

function checkePWD(PWD){
var str=PWD;
//在JavaScript中,正则表达式只能使用"/"开头和结束,不能使用双引号
var Expression=/^[A-Za-z]{1}([A-Za-z0-9]|[._]){5,19}$/;
var objExp=new RegExp(Expression); //创建正则表达式对象
if(objExp.test(str)==true){ //通过正则表达式验证
return true;
}else{
return false;
}
}

(3)调用checkeusername()函数和checkePWD()函数分别判断用户输入的用户名和密码是否合法,如果不合法,将给予提示信息。关键代码如下:

function check(myform){
if(myform.username.value==""){
alert("请输入用户名!");myform.username.focus();return;
}
if(!checkeusername(myform.username.value)){
alert("您输入的用户名不合法!");myform.username.focus();return;
}
if(myform.PWD.value==""){
alert("请输入密码!");myform.PWD.focus();return;
}
if(!checkePWD(myform.PWD.value)){
alert("您输入的密码不合法!");myform.PWD.focus();return;
}
if(myform.PWD1.value==""){
alert("请确认密码!");myform.PWD1.focus();return;
}
if(myform.PWD1.value!=myform.PWD.value){
alert("您两次输入的密码不一致,请重新输入!");myform.PWD.focus();return;
}
myform.submit();
}

下面是一个网站的用户注册信息的校验代码,拔下来供参考

//输入框获得焦点时,显示提示内容
function showDesc(obj) {
var id= obj.name;
document.getElementById(id).style.display="inline";
}

//输入框失去焦点时检验输入内容是否有效
function checkText(obj) {
//获取输入框的id值
var id= obj.name;
var text=document.getElementById(id.toString().toUpperCase()).value;

//判断是否为空
if(text.replace(/\s/g, "")=="")
{
document.getElementById(id).innerHTML="输入不能为空";
}
else
{
//组装方法
//取首字母转换为大写,其余不变
var firstChar=id.charAt(0).toString().toUpperCase();
//
var strsub=id.substring(1,id.length);
var strMethod="check"+firstChar+strsub+"()";
var isTrue = eval(strMethod);
if(isTrue)
{
document.getElementById(id).innerHTML="输入有效";
}
}


}

function checkUsername() {
//只简单的判断用户名的长度
var id = document.getElementById("USERNAME");
var username=id.value;
if(username.length > 10)
{
document.getElementById(id.name).innerHTML = "输入的用户名过长";
return false;
}
else
return true;
}

function checkPassword() {
var password = document.getElementById("PASSWORD").value;
return true;
}

function checkPassword2() {
var id=document.getElementById("PASSWORD");
var id2=document.getElementById("PASSWORD2");
var password = id.value;
var password2 = id2.value;
if(password!=password2)
{
document.getElementById(id.name).innerHTML="密码不一致";
return false;
}
return true;
}

function checkIDNumber() {
var id=document.getElementById("IDNUMBER");
var IDNumber =id.value;
if(IDNumber.length<18||IDNumber.length>19)
{
document.getElementById(id.name).innerHTML="身份证号长度有误";
return false;
}
var expr=/([0]{18}[x|y]?)|([1]{18}[x|y]?)/i;
if(expr.test(IDNumber))
{
document.getElementById(id.name).innerHTML="身份证号不可以全'0'或全'1'";
return false;
}
return true;
}

function checkPhoneNumber() {
// 利用正则表达式对输入数据匹配
var id=document.getElementById("PHONENUMBER");
var phone = id.value;
//匹配到一个非数字字符,则返回false
var expr = /\D/i;
if(expr.test(phone))
{
document.getElementById(id.name).innerHTML="不能输入非数字字符";
return false;
}
return true;

}

function checkEmail() {
// 利用正则表达式对输入数据匹配
var id = document.getElementById("EMAIL");
var email = id.value;
//以字母或数字开头,跟上@,字母数字以.com结尾
var expr = /^([0-9]|[a-z])+@([0-9]|[a-z])+(\.[c][o][m])$/i;
if(!expr.test(email))
{
document.getElementById(id.name).innerHTML="输入的邮箱格式有误";
return false;
}
return true;
}

~~~

未经允许不得转载:WEB前端开发 » 客户端JavaScript正则表达式校验证用户登录名/密码,用户注册信息的校验

赞 (0)