admin管理员组文章数量:1634854
用户注册
- 一、效果图
- 1、用户名验证
- ①规则：只能是字母
- ②规则：只能是中文
- 2、手机号验证
- 3、新密码验证
- 4、验证两次密码是否一致
- 二、图片完整代码
- 三、总结
一、效果图
看看是否是你们想要的效果图？？
1、用户名验证
这里首先要看你对用户名有什么要求，例如：只能是中文，或者字母。
笔者这里没有限制用户名的规则，只是要求不能为空。通过监听事件来时刻监听用户名输入框的变化。
“user_name”: {
deep: true,
handler(val){
if(val !== ''){
this.user_name_prompt = '输入代表性名称'
}else{
this.user_name_prompt = '请输入用户名'
}
}
}
①规则：只能是字母
只能是字母，里面包含了大小写字母
仅匹配大小写字母的正则： /^[a-zA-Z]+$/
②规则：只能是中文
仅匹配中文正则： /^[\u4e00-\u9fa5]+$/
2、手机号验证
首先验证输入的数字是否为阿拉伯数字，不然给予提示，正确后，判断格式手机号格式和长度11位
手机号验证规则： /^[1][3,4,5,7,8][0-9]{9}$/
'phone_number':{ //手机号规则监听
deep: true,
handler(val){
var ze_number = /^[0-9]{1,}$/ //是否为阿拉伯数字：纯数字
if(ze_number.test(val)){
const ze = /^[1][3,4,5,7,8][0-9]{9}$/
//手机号规则：第一位必须是‘1’，第二位只能是‘3’，‘4’，‘5’，‘7’，‘8’，其余的随意
if(val.length > 11){
this.phone_number_prompt = '手机号长度超过11位'
}else if(val.length < 11){
this.phone_number_prompt = '手机号长度不足11位'
}else{
if(ze.test(val) !== true){
this.phone_number_prompt = '不符合手机号规则'
}else{
this.phone_number_prompt = '符合规则'
this.phone_number = val
}
}
}else{
this.phone_number_prompt = '规则：手机号为纯数字'
}
}
},
3、新密码验证
密码验证规则有很多种，笔者这里用的是“字母+数字”组合，且长度不少于8，不大于20.
仅匹配字母和数字组合的正则： /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/
'user_pass': { //密码规则监听
deep: true,
handler(val){
var ze_paw = /^[0-9A-Za-z]{1,}$/
if(ze_paw.test(val)){
const ze_1 = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/
if(val.length >= 8 && val.length <= 20){
if(ze_1.test(val) === false){
this.user_pass_prompt = '密码规则：由"字母"和"数字"组合'
}else{
this.user_pass_prompt = '符合规则'
this.user_pass = val
}
}else{
this.user_pass_prompt = '密码长度设置8~20位'
}
}else{
this.user_pass_prompt = '密码规则：由"字母"和"数字"组合'
}
}
},
4、验证两次密码是否一致
这种有的人会想验证密码规则和前面密码验证规则一样就是复制粘贴，有的人想的是通过for循环遍历来判断对应位置的元素是否相同。这些完全大可不必。
你只需要判断前面的密码输入了没，没有就提醒它请先输入密码，再输入第二次密码时，只需要通过if判断语句来判断就行，就这么简单的解决，代码量也在减少。
'user_pass_again': { //验证两次密码相同
deep: true,
handler(val){
if(this.user_pass !== ''){
if(val.length === this.user_pass.length){
if(this.user_pass === val){
this.user_pass_again_prompt = '密码一致'
}else{
this.user_pass_again_prompt = '密码不一致'
}
}
}else{
this.user_pass_again_prompt = '请先输入上面的密码'
}
}
}
二、图片完整代码
下面笔者将完整的代码放于下面代码框：
<template>
<!-- 忘记密码 -->
<div class="regist" :style="background_main">
<div style="height:7vh;width:100%;" :style="background_title">
<!-- <router-link to="/login"><span style="color:white;font-family:'隶体';"><u><b>>>登陆</b></u></span></router-link> -->
</div>
<div class="card">
<el-card shadow="hover" id="elcard">
<div style="width:100%;height:10%;">
<router-link to="/login"><span style="color: #4169E1; font-family:'隶体';"><u><b>>>登录</b></u></span></router-link>
</div>
<div style="text-align:center;width:100%;">
<el-row>
<el-col :span="24"><span style="font-size:1.4em;font-family:'楷体';"><b>忘记密码</b></span></el-col>
</el-row>
<el-row :gutter="5">
<el-col :span="24">
<el-input type="text" prefix-icon="el-icon-user" placeholder="用户名" value="用户名" class="elinput" v-model="user_name"></el-input>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div style="text-align:left;margin-left:20%;">
<span v-if="user_name_prompt === '输入代表性名称'" style="color:green;font-size:11px;width:20%;">{{ user_name_prompt }}</span>
<span v-else style="color:red;font-size:11px;width:20%;">{{ user_name_prompt }}</span>
</div>
</el-col>
</el-row>
<el-row :gutter="5">
<el-col :span="24">
<el-input type="phone" prefix-icon="el-icon-phone-outline" placeholder="手机号" class="elinput" v-model="phone_number"></el-input>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div style="text-align:left;margin-left:20%;">
<span v-if="phone_number_prompt === '符合规则'" style="color:green;font-size:11px;width:20%;">{{ phone_number_prompt }}</span>
<span v-else style="color:red;font-size:11px;width:20%;">{{ phone_number_prompt }}</span>
</div>
</el-col>
</el-row>
<el-row :gutter="5">
<el-col :span="24">
<el-input type="password" prefix-icon="el-icon-unlock" show-password placeholder="请输入新密码" class="elinput" v-model="user_pass"></el-input>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div style="text-align:left;margin-left:20%;">
<span v-if="user_pass_prompt === '符合规则'" style="color:green;font-size:11px;width:20%;">{{ user_pass_prompt }}</span>
<span v-else style="color:red;font-size:11px;width:20%;">{{ user_pass_prompt }}</span>
</div>
</el-col>
</el-row>
<el-row :gutter="5">
<el-col :span="24">
<el-input type="password" prefix-icon="el-icon-unlock" show-password placeholder="再次输入密码" class="elinput" v-model="user_pass_again"></el-input>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div style="text-align:left;margin-left:20%;">
<span v-if="user_pass_again_prompt === '密码一致'" style="color:green;font-size:11px;width:20%;">{{ user_pass_again_prompt }}</span>
<span v-else style="color:red;font-size:11px;width:20%;">{{ user_pass_again_prompt }}</span>
</div>
</el-col>
</el-row>
</div>
<div style="text-align:center;margin-top:2%;">
<el-button :disabled="butt" type="primary" plain id="elbutton" @click="registerNum()">提交</el-button>
</div>
</el-card>
</div>
</div>
</template>
<script>
export default {
data(){
return {
background_main: {
backgroundImage: 'url('+ require('@/images/MT.png') + ')',
backgroundRepeat: 'no-repeat',
backgroundSize: "100% 100%",
},
background_title: {
backgroundImage: 'url('+ require('@/images/Name.png') + ')',
backgroundRepeat: 'no-repeat',
backgroundSize: "100% 100%",
},
//数据
user_name: '',
user_name_prompt: '',
phone_number: '',
phone_number_prompt: '',
user_pass: '',
user_pass_prompt: '',
user_pass_again: '',
user_pass_again_prompt: '',
butt: false, //注册按钮的显影
}
},
watch:{
'phone_number':{ //手机号规则监听
deep: true,
handler(val){
var ze_number = /^[0-9]{1,}$/
if(ze_number.test(val)){
const ze = /^[1][3,4,5,7,8][0-9]{9}$/
if(val.length > 11){
this.phone_number_prompt = '手机号长度超过11位'
}else if(val.length < 11){
this.phone_number_prompt = '手机号长度不足11位'
}else{
if(ze.test(val) !== true){
this.phone_number_prompt = '不符合手机号规则'
}else{
this.phone_number_prompt = '符合规则'
this.phone_number = val
}
}
}else{
this.phone_number_prompt = '规则：手机号为纯数字'
}
}
},
'user_name': { //用户名规则
deep: true,
handler(val){
if(val !== ''){
this.user_name_prompt = '输入代表性名称'
}else{
this.user_name_prompt = '请输入用户名'
}
}
},
'user_pass': { //密码规则监听
deep: true,
handler(val){
var ze_paw = /^[0-9A-Za-z]{1,}$/
if(ze_paw.test(val)){
const ze_1 = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/
if(val.length >= 8 && val.length <= 20){
if(ze_1.test(val) === false){
this.user_pass_prompt = '密码规则：由"字母"和"数字"组合'
}else{
this.user_pass_prompt = '符合规则'
this.user_pass = val
}
}else{
this.user_pass_prompt = '密码长度设置8~20位'
}
}else{
this.user_pass_prompt = '密码规则：由"字母"和"数字"组合'
}
}
},
'user_pass_again': { //验证两次密码相同
deep: true,
handler(val){
if(this.user_pass !== ''){
if(val.length === this.user_pass.length){
if(this.user_pass === val){
this.user_pass_again_prompt = '密码一致'
}else{
this.user_pass_again_prompt = '密码不一致'
}
}
}else{
this.user_pass_again_prompt = '请先输入上面的密码'
}
}
}
},
methods:{
registerNum(){
const zePhone = /^[1][3,4,5,7,8][0-9]{9}$/
const zePass = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/
if(this.user_name !== ''){ //判断用户名称是否为空
if( zePhone.test(this.phone_number) ) { //验证手机号是否符合规则
if(zePass.test(this.user_pass)){ //验证密码是否符合规则
if(this.user_pass === this.user_pass_again){ //判断两次输入密码是否一致
console.log('-----');
// this.$http.post('').then( res => {
// console.log(res);
// if(res.data.code === 200){
// }
// })
}else{
alert('两次密码框输入"不一致"，请查看')
}
}else{
alert('密码不符合规则：\n密码由"字母"和"数字"组成规则，且长度为8~20')
}
}else{
alert('手机号不符合规则：\n手机号为纯数字，且长度为11')
}
}else{
alert('用户名称不能为空！')
}
}
},
mounted(){
}
}
</script>
<style>
.regist { width: 100%; height: 98vh; }
.card { position: absolute; margin-top: 10vh; margin-left: 20vw; }
#elcard { width: 60vw; height: 60vh; }
.elinput { width: 60%; margin-top: 2%; }
#elbutton { width: 60%; margin-top: 2%; }
</style>
三、总结
作为一名程序员也应该具有安全意识，指的是对于安全的渗透和防卫，这样才可以使你写的代码更具有挑战性和安全性，优美性。自我的优美欣赏！！！是的，这样完全会加大正常的代码工作量，可能比你正常敲的代码还多，但有一个更好的方法：就是你可以把写成一个文本来区分，下次使用直接拖拽进来引入即可。文本的规则是需要从规则中日积月累的，当然你也可以找他人要，这样你学习不到里面的金穗，不要小看一个小小很简单的技术点。感谢大家的欣赏和观看，欢迎技术交流！！！
本文标签： 用户注册
版权声明：本文标题：用户注册和验证 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1729202314a1189769.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论