typescript 是否有更短/更简洁的方法来验证SvelteKit中的字段？

vuktfyat 于 2023-01-27 发布在 TypeScript

关注(0)|答案(1)|浏览(94)

目前，我使用一系列实用函数以及SvelteKit $操作符来确定表单是否有效，如下所示：

<script lang="ts">
    const required = (str: string) => str.length < 1;
    const length = (str: string, minLength: number, maxLength: number) => str.length < minLength || str.length >= maxLength;

    $: errors = {
        name: 
            required(fields.name) ? "Name is a required field." : 
            length(fields.name, 3, 5) ? "Must be between 3-5 chars." : ""
    }

    $: valid = !errors.name;

    const onSubmit = () => {
        if (valid) {
           // ...
        }
    }
</script>

我的问题是：这是验证字段的有效方法吗？如果我有很多字段，更改会重新计算 * 整个 * errors对象，还是只计算必填字段？

typescript

来源：https://stackoverflow.com/questions/75247335/is-there-a-shorter-more-concise-way-to-validate-fields-in-sveltekit

1条答案

按热度按时间

kqqjbcuj1#

使用本地验证怎么样？

<form onsubmit="event.preventDefault(); alert('submitted');">
  <input name="Name" required minlength=3 maxlength=5 />
  <button>Submit</button>
</form>

如果你有更多的定制，也有一些函数。

setCustomValidity-指定任何错误消息，通过设置''清除，应在任何输入/变更时完成。
reportValidity-手动报告验证错误（存在于输入和表单中）。
checkValidity-获取表单/输入是否有效，而不报告错误。

输入上还有一些属性，它们会向您提供消息（validationMessage）或详细状态，其中包含描述错误的各种标志（validity）。
要输出本地验证消息而不是弹出窗口，可以使用invalid事件。如果您的结构是刚性的，则可以向输入添加一个操作，以便在其下一个同级中自动输出错误：

<script>
    function onSubmitClick(event) {
        const form = event.target.closest('form');
        const valid = form.checkValidity();

        if (valid == false) {
            event.preventDefault(); // Prevents error popups
            [...form].find(e => e.validity.valid == false)?.focus();
        }
    }
    
    function validationErrors(node) {
        const output = node.nextElementSibling;
        node.addEventListener('invalid', onInvalid);
        node.addEventListener('input', onInput);
        
        function onInvalid() {
            output.textContent = node.validationMessage;
        }
        
        function onInput() {
            if (node.validationMessage == '')
                output.textContent = '';
        }
        
        return {
            destroy() {
                node.removeEventListener('invalid', onInvalid);
                node.removeEventListener('input', onInput);
            }
        }
    }
</script>

<form on:submit|preventDefault={() => alert('submitted')}>
    <input name="name" required minlength=3 maxlength=5 use:validationErrors />
    <div class="error"></div>

    <div><button on:click={onSubmitClick}>Submit</button></div>
</form>

REPL
这只会在用户试图提交表单时显示错误，这也是我所推荐的。在用户甚至还没有写完的时候斥责他们是不礼貌的。
如果DOM结构不是那么严格，可以使用bind:this来获取元素引用，或者使用类似data-的属性来将元素彼此关联。
它也可以用来提取一些东西来分离组件。动作本身可以被提取到任何JS文件中。

赞(0）回复(0）举报 2023-01-27

我来回答

typescript 是否有更短/更简洁的方法来验证SvelteKit中的字段？

1条答案

相关问题

热门标签

最新问答