Introduction
Welcome to the "Demonstrating Backbone.js" article series. This article demonstrates how to create and use validations in Backbone.js. This article starts with the concept of Backbone.js and various components of it. Previous articles have provided an introduction to views and the implementation of routers and collections. You can get them from the following:
Builtin Validators
- Method Validator
- Named Method Validator
- required
- acceptance
- min
- max
- range
- length
- minLength
- maxLength
- rangeLength
- oneOf
- equalTo
- pattern
In my previous articles we saw the method validators named Method Validator and Acceptance Validator. Here we will see the remaining validators.
Min Validator
It will validate that the value is a number equal to or greater than the min value specified.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="backbone/Jquery.js" type="text/javascript"></script>
<script src="backbone/underscore-min.js" type="text/javascript"></script>
<script src="backbone/backbone-min.js" type="text/javascript"></script>
<script src="backbone/backbone-validation-amd-min.js" type="text/javascript"></script>
<script src="backbone/backbone-validation-min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
var Person = Backbone.Model.extend({
validation: {
age: {
min: 1
}
}
});
</script>
</body>
</html>
Max Validator
It will validate that the value is a number equal to or less than the max value specified.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="backbone/Jquery.js" type="text/javascript"></script>
<script src="backbone/underscore-min.js" type="text/javascript"></script>
<script src="backbone/backbone-min.js" type="text/javascript"></script>
<script src="backbone/backbone-validation-amd-min.js" type="text/javascript"></script>
<script src="backbone/backbone-validation-min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
var Person = Backbone.Model.extend({
validation: {
age: {
max: 100
}
}
});
</script>
</body>
</html>
Range Validator
It will validate that the value is a number between the two numbers specified, inclusive (in other words the supplied value can be equal to the lowest or highest value in the range).
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="backbone/Jquery.js" type="text/javascript"></script>
<script src="backbone/underscore-min.js" type="text/javascript"></script>
<script src="backbone/backbone-min.js" type="text/javascript"></script>
<script src="backbone/backbone-validation-amd-min.js" type="text/javascript"></script>
<script src="backbone/backbone-validation-min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
var Person = Backbone.Model.extend({
validation: {
age: {
range: [1, 10]
}
}
});
</script>
</body>
</html>
Summary
In this article, I explained how to use builtin validators in models in Backbone.js. In future articles we will understand the remaining Validations with examples.