contact.md

layout	title	description	permalink	color
page	Contact	Let's talk.	/contact/	black

<style type="text/css" media="screen"> .container { margin: 0px auto; max-width: 600px; } </style>

和我说

    <input type="text" name="name" placeholder="你的姓名" v-validate="'required'"
           :class="{ 'has-error': errors.has('name') }">
    <span v-if="errors.has('name')" v-cloak>${ errors.first('name') }</span>

    <input type="text" name="email" placeholder="你的e-mail" v-validate="'required|email'"
           :class="{ 'has-error': errors.has('email') }">
    <span v-if="errors.has('email')" v-cloak>${ errors.first('email') }</span>

    <textarea name="message" onkeyup="adjust_textarea(this)" placeholder="你想说的话" v-validate="'required'"
              :class="{ 'has-error': errors.has('message') }"></textarea>
    <span v-if="errors.has('message')" v-cloak>${ errors.first('message') }</span>

    <button type="submit">提交</button>
  </fieldset>
</form>

<script type="text/javascript"> function adjust_textarea(h) { h.style.height = "200px"; h.style.height = (h.scrollHeight)+"px"; } </script> <script src="https://unpkg.com/vue@2.4.2"></script> <script src="https://unpkg.com/vee-validate@2.0.0-rc.8"></script> <script src="https://unpkg.com/vee-validate@2.0.0-rc.8/dist/locale/zh_CN.js"></script> <script type="text/javascript"> Vue.use(VeeValidate, { locale: 'zh_CN' }); new Vue({ el: '#form', delimiters: ['${', '}'], methods: { validateBeforeSubmit: function () { this.$validator.validateAll(); if (!this.errors.any()) { this.$refs.contact.submit(); } } } }); </script>