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


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 相关文章推荐
解决FireFox下[使用event很麻烦]的问题
Nov 26 Javascript
用javascript动态调整iframe高度的代码
Apr 10 Javascript
文本链接逐个出现的js脚本
Dec 12 Javascript
JS 图片缩放效果代码
Jun 09 Javascript
node.js中的events.emitter.once方法使用说明
Dec 10 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 Javascript
Vue数据驱动模拟实现2
Jan 11 Javascript
jQuery插件版本冲突的处理方法分析
Jan 16 Javascript
解决bootstrap-select 动态加载数据不显示的问题
Aug 10 Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 Javascript
使用vue-router切换页面时实现设置过渡动画
Oct 31 Javascript
详解ES6 CLASS在微信小程序中的应用实例
Apr 24 Javascript
检查表单元素的值是否为空的实例代码
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
php header示例代码(推荐)
2010/09/08 PHP
如何利用PHP执行.SQL文件
2013/07/05 PHP
php判断输入是否是纯数字,英文,汉字的方法
2015/03/05 PHP
php简单smarty入门程序实例
2015/06/11 PHP
老生常谈PHP面向对象之注册表模式
2017/05/26 PHP
使用一个for循环将N*N的二维数组的所有值置1实现方法
2017/05/29 PHP
javascript中获取选中对象的类型
2007/04/02 Javascript
js操作textarea方法集合封装(兼容IE,firefox)
2011/02/22 Javascript
js的一些常用方法小结
2011/06/29 Javascript
js 得到文件后缀(通过正则实现)
2013/07/08 Javascript
JS替换字符串中字符即替换全部而不是第一个
2014/06/04 Javascript
javascript中的正则表达式使用指南
2015/03/01 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
JavaScript实现九九乘法表的简单实例
2016/06/07 Javascript
AngularJS使用指令增强标准表单元素功能
2016/07/01 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
2020/03/27 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
2020/08/28 Javascript
python分析网页上所有超链接的方法
2015/05/08 Python
详解在Python中处理异常的教程
2015/05/24 Python
Python简单读取json文件功能示例
2017/11/30 Python
python中ImageTk.PhotoImage()不显示图片却不报错问题解决
2018/12/06 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
python numpy数组中的复制知识解析
2020/02/03 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
入党自我鉴定范文
2013/10/04 职场文书
金融事务专业求职信
2014/04/25 职场文书
公司活动总结范文
2014/07/01 职场文书
公司聚餐通知
2015/04/22 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
导游词之江苏溱潼古镇
2019/11/27 职场文书
理解深度学习之深度学习简介
2021/04/14 Python
springcloud之Feign超时问题的解决
2021/06/24 Java/Android
SpringCloud超详细讲解Feign声明式服务调用
2022/06/21 Java/Android