前端最终规范


输入框只能输入数字

<pre><code class="language-markdown">export function validateNumber(str) { return str.replace(/[^\d]/g, '') }</code></pre> <pre><code class="language-markdown">export function validateNumber(str) { return str.replace(/[^\d]/g, '') } import { getLength, validateNumber } from '@/utils/validate' methods:{ onlyNumber(val) { return validateNumber(val) }, } &lt;el-input v-model="form.fieldMaxLength" @input="form.fieldMaxLength = onlyNumber(form.fieldMaxLength)" placeholder="请填写字符串最大长度" maxlength="50" oninput="value=value.replace(/^\.+|[^\d.]/g,'')" &gt;&lt;/el-input&gt;</code></pre> <h1>//指令的形式</h1> <pre><code class="language-markdown">function onInput(el, ele, binding, vnode) { function handle() { // 只保留数字 ele.value = ele.value.replace(/[^\d]/g, '') } return handle } const numberInput= { bind(el, binding, vnode) { const ele = el.tagName === 'INPUT' ? el : el.querySelector('input') ele.addEventListener('input', onInput(el, ele, binding, vnode), false) }, } Vue.directive('number-input', numberInput) &lt;el-input v-model="model" v-number-input /&gt; function handle() { + let val = ele.value + // modifiers为修饰符对象,传入了float,则其float属性为true + if (binding.modifiers.float) { + // 清除"数字"和"."以外的字符 + val = val.replace(/[^\d.]/g, '') + // 只保留第一个, 清除多余的 + val = val.replace(/\.{2,}/g, '.') + // 第一个字符如果是.号,则补充前缀0 + val = val.replace(/^\./g, '0.') + } else { val = ele.value.replace(/[^\d]/g, '') } ele.value = val } 来源:https://www.jb51.net/article/169052.htm</code></pre>

页面列表

ITEM_HTML