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


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 相关文章推荐
自动完成JS类(纯JS, Ajax模式)
Mar 12 Javascript
怎么清空javascript数组
May 11 Javascript
prototype.js常用函数详解
Jun 18 Javascript
jQuery实现导航回弹效果
Feb 27 Javascript
vue实现百度搜索下拉提示功能实例
Jun 14 Javascript
JS实现前端缓存的方法
Sep 21 Javascript
JavaScript实现短暂提示框功能
Apr 04 Javascript
深入理解JavaScript的值传递和引用传递
Oct 24 Javascript
Nuxt.js SSR与权限验证的实现
Nov 21 Javascript
vue--vuex详解
Apr 15 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
Aug 07 Javascript
LayUi数据表格自定义赋值方式
Oct 26 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进行MySQL删除记录操作代码
2008/06/07 PHP
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
Yii实现复选框批量操作实例代码
2017/03/15 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
datePicker——日期选择控件(with jquery)
2007/02/20 Javascript
Javascript 通过json自动生成Dom的代码
2010/04/01 Javascript
javascript权威指南 学习笔记之javascript数据类型
2011/09/24 Javascript
javascript将数组插入到另一个数组中的代码
2013/01/10 Javascript
javascript拖拽上传类库DropzoneJS使用方法
2013/12/05 Javascript
Javascript window对象详解
2014/11/12 Javascript
javascript定义类和类的实现实例详解
2015/12/01 Javascript
ES6的新特性概览
2016/03/10 Javascript
Angular2表单自定义验证器的实现
2016/10/19 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
对layui中表单元素的使用详解
2018/08/15 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
2018/09/29 Javascript
js回文数的4种判断方法示例
2019/06/04 Javascript
jQuery实时统计输入框字数及限制
2020/06/24 jQuery
python3.0 字典key排序
2008/12/24 Python
基于Python实现的微信好友数据分析
2018/02/26 Python
Django+Xadmin构建项目的方法步骤
2019/03/06 Python
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
艺术用品:Arteza
2018/11/25 全球购物
正宗的澳大利亚Ugg靴子零售商:UGG Express
2020/04/19 全球购物
网络编辑岗位职责范本
2014/02/10 职场文书
愚人节活动策划方案
2014/03/11 职场文书
党员领导干部廉洁从政承诺书
2014/03/27 职场文书
体育之星事迹材料
2014/05/11 职场文书
创先争优活动承诺书
2014/08/30 职场文书
2015年安全员工作总结范文
2015/04/22 职场文书
单位工资证明范本
2015/06/12 职场文书
《去年的树》教学反思
2016/02/18 职场文书
导游词之河北滦平金山岭长城
2019/10/16 职场文书
Python中seaborn库之countplot的数据可视化使用
2021/06/11 Python
为什么MySQL不建议使用SELECT *
2022/04/03 MySQL