客户端验证用户名和密码的方法详解


Posted in Javascript onJune 16, 2016

1.概述

在动态网站的用户注册页面中,经常需要对用户输入的用户名和密码的位数及成员组成进行判断,这样可以规范用户的注册信息。例如本实例,要求用户名由3-10位的字母、数字和下划线组成,密码由6-20位的字母、数字、下划线和点“.”组成并且首字符为字母,这时就需要对用户的输入进行判断,因此笔者编写了两个函数,分别用于验证用户输入的用户名和密码是否合法。

2.技术要点

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

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

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

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

3.具体实现代码

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

<script language="javascript">
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;
}
}
</script>

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

<script language="javascript">
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;
}
}
</script>

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

<script language="javascript">
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();
}
</script>

以上所述是小编给大家介绍的客户端验证用户名和密码的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript高亮效果的二种实现方法
Sep 14 Javascript
jQuery往返城市和日期查询实例讲解
Oct 09 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
Sep 06 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
详解能在多种前端框架下使用的表格控件
Jan 11 Javascript
angular 动态组件类型详解(四种组件类型)
Feb 22 Javascript
VUE实现日历组件功能
Mar 13 Javascript
vue引入axios同源跨域问题
Sep 27 Javascript
vue.js实现备忘录demo
Jun 26 Javascript
vue表单数据交互提交演示教程
Nov 13 Javascript
微信小程序开发(二):页面跳转并传参操作示例
Jun 01 Javascript
vue css 相对路径导入问题级踩坑记录
Jun 05 Vue.js
检查表单元素的值是否为空的实例代码
Jun 16 #Javascript
jQuery使用each方法与for语句遍历数组示例
Jun 16 #Javascript
基于JS代码实现实时显示系统时间
Jun 16 #Javascript
JavaScript代码实现图片循环滚动效果
Mar 19 #Javascript
jquery插件格式实例分析
Jun 16 #Javascript
详解JavaScript对象类型
Jun 16 #Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 #Javascript
You might like
re0第二季蕾姆被制作组打入冷宫!艾米莉亚女主扶正,原因唏嘘
2020/04/02 日漫
我常用的几个类
2006/10/09 PHP
PHP连接SQLServer2005 的问题解决方法
2010/07/19 PHP
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
thinkphp微信开之安全模式消息加密解密不成功的解决办法
2015/12/02 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
$.extend 的一个小问题
2015/06/18 Javascript
简单实现js菜单栏切换效果
2017/03/04 Javascript
Jquery-data的三种用法
2017/04/18 jQuery
javascript 开发之百度地图使用到的js函数整理
2017/05/19 Javascript
基于Vue.js 2.0实现百度搜索框效果
2020/12/28 Javascript
解析Vue.js中的组件
2018/02/02 Javascript
在vue2.0中引用element-ui组件库的方法
2018/06/21 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
请求时token过期自动刷新token操作
2020/09/11 Javascript
[33:15]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VP VS Mineski
2018/03/31 DOTA
[03:12]完美世界DOTA2联赛PWL DAY9集锦
2020/11/10 DOTA
[38:54]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第一场 11.28
2020/12/01 DOTA
一个检测OpenSSL心脏出血漏洞的Python脚本分享
2014/04/10 Python
浅析Python中return和finally共同挖的坑
2017/08/18 Python
用纯CSS3实现网页中常见的小箭头
2017/10/16 HTML / CSS
努比亚手机官网:nubia
2016/10/06 全球购物
英国助听器购物网站:Hearing Direct
2018/08/21 全球购物
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
厨房工作人员岗位职责
2013/11/15 职场文书
大学毕业感言一句话
2014/02/06 职场文书
母亲节感恩活动记录
2014/03/16 职场文书
2014年五四青年节演讲比赛方案
2014/04/22 职场文书
学习朴航瑛老师爱岗敬业先进事迹思想汇报
2014/09/17 职场文书
工程项目经理岗位职责
2015/02/02 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
医护人员继续教育学习心得体会
2016/01/19 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js