1.首先要在html文档中引入jquery版本2.0以下的、一个vuejs库 一个element-ui库
<script src="js/jquery-1.11.0.min.js"></script> <script src="js/vue.js"></script> <script src="js/element-ui.js"></script>
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的注册插件的编写方法,希望对大家有所帮助
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!
网友评论