vue+elementui 注册验证用户名是否存在

1.实现效果

2.代码

html

<template><el-form:model="ruleForm":rules="rules"ref="ruleForm"class="demo-ruleForm"><el-form-item label="" prop="name"><el-inputtype="text"autocomplete="off"v-model="ruleForm.name"prefix-icon="el-icon-user-solid"placeholder="请输入用户名"></el-input></el-form-item><el-form-item label="" prop="password1"><el-inputtype="password"autocomplete="off"v-model="ruleForm.password1"prefix-icon="el-icon-lock"placeholder="请输入密码"></el-input></el-form-item><el-form-item label="" prop="password2"><el-inputtype="password"autocomplete="off"v-model="ruleForm.password2"prefix-icon="el-icon-lock"placeholder="请再次输入密码"></el-input></el-form-item><el-form-item class="btns"><el-button type="primary" @click="submitForm('ruleForm')">注册</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item></el-form>
</template>

验证用户名后端返回数据

<script>
//引入接口
import { userRules, register } from "./../api/login";
export default {data() {var validatePass = (rule, value, callback) => {if (value === "") {callback(new Error("请输入密码"));} else {if (this.ruleForm.password2 !== "") {this.$refs.ruleForm.validateField("password2");}callback();}};var validatePass2 = (rule, value, callback) => {if (value === "") {callback(new Error("请再次输入密码"));} else if (value !== this.ruleForm.password1) {callback(new Error("两次输入密码不一致!"));} else {callback();}};var checkname = (rule, value, callback) => {if (value != "") {if(this.nameRules()){callback(new Error("用户名已存在，请重新输入"))}else{callback()}}callback();};return {activeName:"second",ruleForm: {name: "",password1: "",password2: "",email:""},rules: {name: [{ required: true, message: "请输入您的名称", trigger: "blur" },{min: 2,max: 25,message: "长度在 2 到 25 个字符",trigger: "blur",},{ validator: checkname, trigger: "blur" },],password1: [{ required: true, validator: validatePass, trigger: "blur" },],password2: [{ required: true, validator: validatePass2, trigger: "blur" },],},};},methods: {submitForm(formName) {const data = {name : this.ruleForm.name,password1:this.ruleForm.password1,password2:this.ruleForm.password2,email:this.ruleForm.email}this.$refs[formName].validate((valid) => {if (valid) {register(data).then((res) => {if (res.message == "ok") {this.$message.success("注册成功");this.resetForm(formName)} else {this.$message.error("注册失败");}});} else {return false;}});},resetForm(formName) {this.$refs[formName].resetFields();},//验证用户名是否存在nameRules() {let params = {name: this.ruleForm.name,};userRules(params).then((res) => {if(res.message == 'ok'){return false}else{this.$message.error("用户名已存在，请重新输入!")this.ruleForm.name = ""}})},}
};
</script>

vue+elementui 注册验证用户名是否存在相关推荐

asp判断ajax请求 -asp.net,一个asp注册验证用户名是否重复的Ajax实例
一个asp注册验证用户名是否重复的Ajax实例 1.需要用到的初始化xmlhttp实例和发送请求的javascript函数: 以下为引用的内容: // JavaScript Document func ...
php注册验证用户名已存在,php ajax注册验证用户名是否存在代码_PHP教程
php ajax注册验证用户名是否存在代码这是注册程序是一款当用户输入完用户名是,就会自动去数据库中查询用户要注册的用户名是否己经被注册了,如果是返回提示否则提示可以注册. php教程 ajax注册 ...
vue表单验证(用户名、密码、身份证号、中文姓名、手机号、邮箱)
vue表单验证(用户名.密码.身份证号.中文姓名.手机号.邮箱) new Vue({el: '#register',data: function() {// 验证邮箱let checkEmail = ...
html ajax验证用户名密码,AJAX实现注册验证用户名
本文实例为大家分享了AJAX实现注册验证用户名的具体代码,供大家参考,具体内容如下功能说明当用户在注册页面输入用户名并且鼠标焦点离开输入框时,到数据表中去验证该用户名是否已经存在,如果存在提示不可 ...
vue+elementui身份证验证
1.js // 身份证验证isCardID (rule, value, callback) {console.log(value)if (!/(^\d{15}$)|(^\d{17}(\d|X|x)$) ...
vue+element-ui el-input验证手机号 / 身份证
el-input验证手机号 html <el-form ref="Form" :rules="rules" :model="edit" ...
Vue使用表单验证用户名和密码
功能描述:实现输入用户名和密码不合法时提前弹出提示表单样式: 基本功能: 为空时提示: 长度不合法时提示: 表单输入文本框代码: <el-form :model="user" ...
vue 表单验证正则_vue elementui form表单验证的实现
最近我们公司将前端框架由easyui 改为 vue+elementui .自学vue两周就开始了爬坑之路.业余时间给大家分享一下心得,技术新手加上第一次分享(小激动),有什么不足的地方欢迎大家指正, ...
用vue+element-ui快速写一个注册登录页面
vue+element-ui可以快速开发一个页面,免除大部分的css代码. 一.用表单来做: 1.代码:  <template><div ...
vue+elementUI完成登陆+注册
目录 1. vue怎么引入和配置使用element-ui框架 1.1 使用vue-cli脚手架工具创建一个vue项目 1.2 npm安装elementUI 1.3 在项目中src目录下找到main.j ...

vue+elementui 注册验证用户名是否存在

vue+elementui 注册验证用户名是否存在相关推荐

最新文章

热门文章