表单提交按钮，当未填写信息时，按钮不可点击

1、基于jquery实现方案

1.html部分

 <div class="form">
     <div>用户名:<input name="name" data-name="name"/></div>
     <div>密码:<input name="paw" data-name="paw" /></div>
     <div>年龄:<input name="age" data-name="age" /></div>
     <button disabled id="save_btn">提交</button>
  </div>

2.js部分
1）引入jquery
2）函数

//formData：包含控制按钮是否可用的字段
var formData = {
    name:'',
    paw:'',s
    age:''
   }
   //input事件：输入框变化时，判断是否需要改变提交按钮的可用与否状态s
  $('input').on('input', function(){
    var name = $(this).data('name');
    var oldValue = formData[name];
    var newValue = $(this).val();
    formData[name] = newValue;
    if(!(oldValue && newValue)){ //1.之前无值现在有值 2.之前有值现在删除了
        $('#save_btn').attr("disabled", isFormReady());
    }
  })
  //遍历formData，当formData中字段有未填项则按钮不可点击
  function isFormReady(){
    for (let i in formData) {
      if (!formData[i]) return true
    }
    return false
  }

3.效果

2、基于vue实现方案

1.html

<div class="form">
     <div>用户名:<input name="name" v-model="formData.name" /></div>
     <div>密码:<input name="paw" v-model="formData.paw" /></div>
     <div>年龄:<input name="age" v-model="formData.age" /></div>
     <div>注释：<textarea name="remark" v-model="formData.remark"></textarea></div>
     <button :disabled="isFormReady(formData, ['remark'])">提交</button>
  </div>

2.js

<script>
export default {
  name: '',
  props:['content'],
  data(){
    return {
      formData:{
        name:'',
        paw:'',
        age:'',
        remark:''
      }
    }
  },
  methods:{
   //except传入的 remark，此字段是否填写不影响按钮是否可用
    isFormReady(form, except){
      for (let i in form) {
          if (except && except.indexOf(i) !== -1) continue
          if (!form[i]) return true
      }
      return false
    }
  }
}
</script>