Επικύρωση εισόδου με το validate() ενός συστατικού

jComponent 20 · jcomponent@20 jcomponentfrontendvalidationforms Εκτελέστηκε με jComponent 20

Ένα συστατικό που επεξεργάζεται μια τιμή μπορεί να την επικυρώνει. Ορίστε self.validate(value) και επιστρέψτε true (ή κενό string) όταν η τιμή είναι έγκυρη ή false (ή ένα μήνυμα) όταν δεν είναι. Γράψτε την τιμή πίσω με self.modify(value): σημειώνει επίσης το συστατικό ως modified και touched.

Το jComponent κρατά αυτές τις καταστάσεις στο config (invalid, touched, modified) και ως κλάσεις CSS (ui-invalid, ui-touched, ui-modified), οπότε η μορφοποίηση δεν χρειάζεται κώδικα. Το ERRORS(path, callback) επιστρέφει τα άκυρα συστατικά κάτω από μια διαδρομή, που είναι ό,τι χρειάζεται μια φόρμα πριν υποβληθεί, και το RESET(path) καθαρίζει τις καταστάσεις touched και modified.

public/index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>jComponent</title>
	<link rel="stylesheet" href="//cdn.componentator.com/spa.min@20.css" />
	<script src="//cdn.componentator.com/spa.min@20.js"></script>
</head>
<body>
	<style>.ui-invalid input { border: 2px solid crimson; }</style>

	<ui-component name="required" path="form.name"></ui-component>
	<ui-component name="required" path="form.email"></ui-component>

	<script>

		COMPONENT('required', function(self) {

			self.make = function() {
				self.html('<input type="text" />');
				self.find('input').on('input', function() {
					self.modify(this.value);
				});
			};

			self.validate = function(value) {
				return !!value && value.length > 2;
			};

			self.setter = function(value) {
				self.find('input').val(value || '');
			};
		});

		SET('form.name', 'Peter');
		SET('form.email', '');

	</script>

</body>
</html>

Δοκιμάστε το στον browser σας

Επεξεργαστείτε το παράδειγμα και εκτελέστε το. Εκτελείται σε απομονωμένο πλαίσιο στον browser σας· τίποτα δεν στέλνεται στον διακομιστή μας.

Κώδικας

Προεπισκόπηση