vue 设置表单必填项-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue 设置表单必填项。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.要求

在做一些用户信息相关的功能时，经常用到表单项去收集数据，其中有些属性必须填写，要求如图：

vue必填项,前端,javascript,开发语言

2.实现方法

在data中添加一个rules来规定：

rules: {
    no: [{required: true, message: '请输入账号', trigger: 'blur'}]
}

其中：required表示是否为必填项；message:表示提示信息；trigger：表示失去焦点时验证

2.在el-form表单中绑定rules：

<el-form ref="form" :model="form" :rules="rules"></el-form>

3.在表单项中用prop属性来对应el-form的:rules="rules"

<el-form-item class="item" prop="no" label="登陆账号">
          <el-input v-model="form.no"></el-input>
</el-form-item>

3.完整代码文章来源地址https://www.toymoban.com/news/detail-517567.html

//<template>
<div>
    <div class="title">用户设置</div>
      <el-form ref="formdata" :model="formdata" :rules="rules" label-width="78px">
        <el-form-item class="item" prop="no" label="登陆账号">
          <el-input v-model="formdata.no" disabled></el-input>
        </el-form-item>
        <el-form-item class="item" prop="name" label="用户名称">
          <el-input v-model="formdata.name" disabled></el-input>
        </el-form-item>
        <el-form-item class="item" prop="oldPsw" label="原始密码">
          <el-input v-model="formdata.oldPsw" show-password  placeholder="请输入原始密码" ></el-input>
        </el-form-item>
        <el-form-item class="item" prop="newPsw" label="新密码">
          <el-input v-model="formdata.newPsw" show-password  placeholder="请输入新密码"></el-input>
        </el-form-item>
        <el-form-item class="item" prop="retypePsw" label="确认密码">
          <el-input v-model="formdata.retypePsw" show-password  placeholder="请再次输入新密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确认</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
</div>
//data
data()
  {
    return {
      formdata: {
        no: user.no,
        name: user.name,
        oldPsw: '',
        newPsw: '',
        retypePsw: ''
      },
      rules:
      {
        no: [{required: true, message: '请输入账号', trigger: 'blur'}],
        name: [{required: true, message: '请输入用户姓名', trigger: 'blur'}],
        oldPsw: [{required: true, message: '请输入密码', trigger: 'blur'}],
        newPsw: [
          {required: true, message: '请输入新密码', trigger: 'blur'}],
        retypePsw: [
          { required: true, message: '请再次输入密码', trigger: 'blur' }]
      }
    }
  }

到了这里，关于vue 设置表单必填项的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！