基于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 相关文章推荐
JS截取字符串常用方法详细整理
Oct 28 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
Aug 27 Javascript
Node.js 制作实时多人游戏框架
Jan 08 Javascript
jQuery插件制作之全局函数用法实例
Jun 01 Javascript
jquery实现可旋转可拖拽的文字效果代码
Jan 27 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 Javascript
JavaScript中三种常见的排序方法
Feb 24 Javascript
AngularJS之页面跳转Route实例代码
Mar 10 Javascript
Node.js安装详细步骤教程(Windows版)详解
Sep 01 Javascript
Layui 解决表格异步调用后台分页的问题
Oct 26 Javascript
八种Vue组件间通讯方式合集(推荐)
Aug 18 Javascript
ES5和ES6中类的区别总结
Dec 21 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
咖啡豆要不要放冰箱的原因
2021/03/04 冲泡冲煮
新手配置 PHP 调试环境(IIS+PHP+MYSQL)
2007/01/10 PHP
php部分常见问题总结
2008/03/27 PHP
PHP和Mysql中转UTF8编码问题汇总
2015/10/10 PHP
jquery自定义属性(类型/属性值)
2013/05/21 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2013/10/24 Javascript
判断滚动条到底部的JS代码
2013/11/04 Javascript
JS获取html对象的几种方式介绍
2013/12/05 Javascript
js中小数转换整数的方法
2014/01/26 Javascript
Javascript获取当前日期的农历日期代码
2014/10/08 Javascript
15款jQuery分布引导插件分享
2015/02/04 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
详解JavaScript基于面向对象之创建对象(1)
2015/12/10 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
2016/07/28 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
2016/12/30 Javascript
详解webpack的proxyTable无效的解决方案
2018/06/15 Javascript
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
通过图带你深入了解vue的响应式原理
2019/06/21 Javascript
[01:57]2016完美“圣”典风云人物:国士无双专访
2016/12/04 DOTA
有关wxpython pyqt内存占用问题分析
2014/06/09 Python
Python 装饰器使用详解
2017/07/29 Python
Python 错误和异常代码详解
2018/01/29 Python
Django学习教程之静态文件的调用详解
2018/05/08 Python
python 查找文件名包含指定字符串的方法
2018/06/05 Python
python中单例常用的几种实现方法总结
2018/10/13 Python
python实现换位加密算法的示例
2018/10/14 Python
在Python中使用MySQL--PyMySQL的基本使用方法
2019/11/19 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
python 截取XML中bndbox的坐标中的图像,另存为jpg的实例
2020/03/10 Python
Footshop罗马尼亚:最好的运动鞋选择
2019/09/10 全球购物
本科生职业生涯规划书范文
2014/01/21 职场文书
《木笛》教学反思
2014/03/01 职场文书
中学生国旗下讲话稿
2014/04/26 职场文书
领导批评与自我批评范文
2014/10/16 职场文书