mirror of
https://github.com/MewoLab/AquaDX.git
synced 2026-02-11 17:07:27 +08:00
[+] Input validation
This commit is contained in:
@@ -3,11 +3,14 @@
|
|||||||
export let value: string
|
export let value: string
|
||||||
export let placeholder: string
|
export let placeholder: string
|
||||||
export let flex: number = 60
|
export let flex: number = 60
|
||||||
|
|
||||||
|
export let validate: (value: string) => boolean = () => true
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="field" style="flex: {flex}">
|
<div class="field" style="flex: {flex}">
|
||||||
<label for={desc}>{desc}</label>
|
<label for={desc}>{desc}</label>
|
||||||
<input type="text" placeholder={placeholder} bind:value={value} id="{desc}" on:change />
|
<input type="text" placeholder={placeholder} bind:value={value} id="{desc}" on:change
|
||||||
|
class:error={value && !validate(value)}/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style lang="sass">
|
<style lang="sass">
|
||||||
|
|||||||
@@ -21,9 +21,9 @@
|
|||||||
<!-- First input line -->
|
<!-- First input line -->
|
||||||
<div class="inputs">
|
<div class="inputs">
|
||||||
<InputTextShort desc="Server Address" placeholder="e.g. http://aquadx.hydev.org"
|
<InputTextShort desc="Server Address" placeholder="e.g. http://aquadx.hydev.org"
|
||||||
bind:value={src.server} on:change />
|
bind:value={src.server} on:change validate={v => /^https?:\/\/[a-z0-9.-]+(:\d+)?$/i.test(v)} />
|
||||||
<InputTextShort desc="Keychip ID" placeholder="e.g. A0299792458"
|
<InputTextShort desc="Keychip ID" placeholder="e.g. A0299792458"
|
||||||
bind:value={src.keychip} on:change />
|
bind:value={src.keychip} on:change validate={v => /^[A-Z0-9]{11}$/.test(v)} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Second input line -->
|
<!-- Second input line -->
|
||||||
|
|||||||
Reference in New Issue
Block a user