1.首先要在HTML文档中引入jQuery版本2.0以下的、一个vuejs库 一个Element-UI库
<script src="/UploadFiles/2021-04-02/jquery-1.11.0.min.js">2.HTML的布局
<div id="app"> <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm"> <el-form-item label="名字" prop="name"> <el-input type="text" v-model="ruleForm2.name" auto-complete="off"></el-input> </el-form-item> <el-form-item label="昵称" prop="niceName"> <el-input type="text" v-model="ruleForm2.niceName" auto-complete="off"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input v-model="ruleForm2.password" type="password"></el-input> </el-form-item> <el-form-item label="电话" prop="phone"> <el-input v-model="ruleForm2.phone" type="tel"></el-input> </el-form-item> <el-form-item label="邮箱" prop="email"> <el-input v-model="ruleForm2.email" type="email"></el-input> </el-form-item> <el-form-item label="身份证号码" prop="identity"> <el-input v-model="ruleForm2.identity" type="number"></el-input> </el-form-item> <el-form-item label="QQ" prop="qq"> <el-input v-model="ruleForm2.qq" type="number"></el-input> </el-form-item> <el-form-item label="微信号" prop="wechat"> <el-input v-model="ruleForm2.wechat" type="text"></el-input> </el-form-item> <el-form-item label="个性签名" prop="signature"> <el-input type="textarea" v-model="ruleForm2.signature"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button> <el-button @click="resetForm('ruleForm2')">重置</el-button> </el-form-item> </el-form> </div>3.js部分内容的编写,带正则验证的
var Main = { data(){ // 验证名字正则表达式 var validateName = (rule, value, callback) => { var regExp=/^[\u4e00-\u9fa5]{2,4}$/; if (value === '') { callback(new Error('请输入名字')); }else if(regExp.test(value) === false){ callback(new Error('请输入正确的名字')) } else { callback(); } }; // 验证昵称正则表达式 var validateName2 = (rule, value, callback) => { var regExp=/^[\u4e00-\u9fa5]{2,4}$/; if (value === '') { callback(new Error('请输入昵称')); }else if(regExp.test(value) === false){ callback(new Error('请按格式输入昵称')) } else { callback(); } }; //验证密码正则表达式 var validatePass = (rule, value, callback) => { var regExp = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/; if (value === '') { callback(new Error('请输入密码')) } else if (regExp.test(value) === false) { callback(new Error('8-16字母和数字组成,不能是纯数字或纯英文')) } else { callback() } } //验证电话号码正则表达式 var validateTel = (rule, value, callback) => { var regExp = /^1[3|5|8|7][0-9]{9}$/; if (value === '') { callback(new Error('请输入手机号码')); }else if (regExp.test(value) === false) { callback(new Error('请输入正确手机号码')) } else { callback(); } }; //验证身份正号码正则表达式 var validateIdentity = (rule, value, callback) => { var regExp = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; if (value === '') { callback(); }else if (regExp.test(value) === false) { callback(new Error('请输入身份证号码')) } else { callback(); } }; //验证QQ号码正则表达式 var validateQQ = (rule, value, callback) => { var regExp =/^[1-9][0-9]{5,10}$/; if (value ==='') { callback(); }else if (regExp.test(value) === false) { callback(new Error('请输入正确的QQ号码')) } else { callback(); } }; //验证微信号码正则表达式 var validateWechat = (rule, value, callback) => { var regExp =/^[a-zA-Z\d_]{5,}$/; if (value === '') { callback(); }else if (regExp.test(value) === false) { callback(new Error('请输入正确的微信号')) } else { callback(); } }; return { ruleForm2: { name: '', niceName: '', password: '', phone:'', identity:'', qq:'', wechat:'', signature:'' }, rules2: { name: [ { validator: validateName, trigger: 'blur' } ], niceName: [ { validator: validateName2, trigger: 'blur' } ], password: [ { validator:validatePass , trigger: 'blur' } ], phone: [ { validator:validateTel , trigger: 'blur' } ], email: [ { required: false, message: '请输入邮箱地址', trigger: 'blur' }, { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' } ], identity: [ { validator:validateIdentity , trigger: 'blur' } ], qq: [ { validator:validateQQ , trigger: 'blur' } ], wechat: [ { validator:validateWechat , trigger: 'blur' } ], signature: [ { required: false, message: '请填写活动形式', trigger: 'blur' } ] } }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { var _self = this $.ajax({ url: 'http://192.168.0.150:8080/user/userRegister', type: 'POST', data: _self.ruleForm2, }).done(function(data) { console.log(data) }).fail(function(data) { //用于注册完成后的页面跳转 console.log(data) }) } else { //注册信息不符合规则 console.log('error submit!!'); return false; } }); }, //重新填写注册信息 resetForm(formName) { this.$refs[formName].resetFields(); } } } var Ctor = Vue.extend(Main) new Ctor().$mount('#app')在这说明以下交互部分用jQuery写的,更改$.ajax的URL部分是可以直接用的
以上所述是小编给大家介绍的基于Vuejs和Element的注册插件的编写方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?
更新日志
2024年09月24日
2024年09月24日
- 陈随意2008-爱的总铺师[美华][WAV+CUE]
- 裘德《一棵树所创造的》[320K/MP3][56.21MB]
- 裘德《一棵树所创造的》[24bit 48kHz][FLAC/分轨][355.1MB]
- 卓依娜姆《美人谋 网剧影视原声带》[320K/MP3][48.29MB]
- 张星特.2024-流绪呢喃【中视鸣达】【FLAC分轨】
- 邓紫棋.2010-MYSECRET【蜂鸟音乐】【WAV+CUE】
- 江惠仪.2011-感謝您【禾广娱乐】【FLAC分轨】
- 韩红2005-精选[首版][WAV+CUE]
- 张敬轩.2004-A.M/P.M【几何文化】【WAV+CUE】
- 范文芳1999-真心话电影原声带[HYPE][WAV+CUE]
- 袁培华.1990-我写不出一首情歌给我最爱的你【可登】【WAV+CUE】
- 群星.2007-歌林10年流行岁月12CD【歌林】【WAV+CUE】
- 软硬天师.2006-LONG.TIME.NO.SEE【金牌大风】【WAV+CUE】
- 卓依娜姆《美人谋 网剧影视原声带》[FLAC/分轨][162.27MB]
- 国风大师纯音系列《蒋倩 :古筝演奏家》1CD[MP3][160.7MB]