基于Vuejs和Element的注册插件的编写方法


Posted in Javascript onJuly 03, 2017

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的注册插件的编写方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
Sep 04 Javascript
用Javascript同时提交多个Web表单的方法
Dec 26 Javascript
window.opener用法和用途实例介绍
Aug 19 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
Dec 27 Javascript
js自定义回调函数
Dec 13 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
Jun 24 Javascript
IE下JS保存图片的简单实例
Jul 15 Javascript
轻松掌握JavaScript状态模式
Sep 07 Javascript
Bootstrap的modal拖动效果
Dec 25 Javascript
Vue.js的动态组件模板的实现
Nov 26 Javascript
解决小程序无法触发SESSION问题
Feb 03 Javascript
js get和post请求实现代码解析
Feb 06 Javascript
Async Validator 异步验证使用说明
Jul 03 #Javascript
在vue-cli脚手架中配置一个vue-router前端路由
Jul 03 #Javascript
Require.js的基本用法详解
Jul 03 #Javascript
React利用插件和不用插件实现双向绑定的方法详解
Jul 03 #Javascript
解决webpack -p压缩打包react报语法错误的方法
Jul 03 #Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
Jul 03 #Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
Jul 03 #Javascript
You might like
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
PHP 双链表(SplDoublyLinkedList)简介和使用实例
2015/05/12 PHP
广告切换效果(缓动切换)
2009/05/27 Javascript
JQUERY dialog的用法详细解析
2013/12/19 Javascript
js中精确计算加法和减法示例
2014/03/28 Javascript
Javascript验证上传图片大小[前台处理]
2014/07/18 Javascript
javascript图片延迟加载实现方法及思路
2015/12/31 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
2016/09/16 Javascript
详解js数组的完全随机排列算法
2016/12/16 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
2017/09/10 Javascript
mock.js实现模拟生成假数据功能示例
2019/01/15 Javascript
vue基于viewer实现的图片查看器功能
2019/04/12 Javascript
JS实现横向轮播图(初级版)
2020/06/24 Javascript
Python使用Socket(Https)Post登录百度的实现代码
2012/05/18 Python
Python中常用操作字符串的函数与方法总结
2016/02/04 Python
python用户评论标签匹配的解决方法
2018/05/31 Python
python截取两个单词之间的内容方法
2018/12/25 Python
Python 实现还原已撤回的微信消息
2019/06/18 Python
详解python编译器和解释器的区别
2019/06/24 Python
python交易记录整合交易类详解
2019/07/03 Python
在自动化中用python实现键盘操作的方法详解
2019/07/19 Python
Pytorch实现的手写数字mnist识别功能完整示例
2019/12/13 Python
python模块如何查看
2020/06/16 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
吃透移动端 Html5 响应式布局
2019/12/16 HTML / CSS
Foot Locker英国官网:美国知名运动产品零售商
2019/02/21 全球购物
如何用PHP实现邮件发送
2012/12/26 面试题
售后服务承诺书
2014/03/26 职场文书
高中课前三分钟演讲稿
2014/09/13 职场文书
三下乡个人总结
2015/03/04 职场文书
百年孤独读书笔记
2015/06/29 职场文书
Golang实现AES对称加密的过程详解
2021/05/20 Golang